<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<th:block th:include="include :: header('核算新工资')" />
<!-- <th:block th:include="include :: bootstrap3-css" /> -->
<th:block th:include="include :: bootstrap-table-css" />
<th:block th:include="include :: bootstrap-datepicker-css" />
<th:block th:include="include :: smartwizard-css" />
<!-- <th:block th:include="include :: bootstrap-table-editable-css" /> -->
<th:block th:include="include :: jquery-webui-popover-css" />
</head>
<!-- BEGIN Body -->
<!-- Possible Classes

		* 'header-function-fixed'         - header is in a fixed at all times
		* 'nav-function-fixed'            - left panel is fixed
		* 'nav-function-minify'			  - skew nav to maximize space
		* 'nav-function-hidden'           - roll mouse on edge to reveal
		* 'nav-function-top'              - relocate left pane to top
		* 'mod-main-boxed'                - encapsulates to a container
		* 'nav-mobile-push'               - content pushed on menu reveal
		* 'nav-mobile-no-overlay'         - removes mesh on menu reveal
		* 'nav-mobile-slide-out'          - content overlaps menu
		* 'mod-bigger-font'               - content fonts are bigger for readability
		* 'mod-high-contrast'             - 4.5:1 text contrast ratio
		* 'mod-color-blind'               - color vision deficiency
		* 'mod-pace-custom'               - preloader will be inside content
		* 'mod-clean-page-bg'             - adds more whitespace
		* 'mod-hide-nav-icons'            - invisible navigation icons
		* 'mod-disable-animation'         - disables css based animations
		* 'mod-hide-info-card'            - hides info card from left panel
		* 'mod-lean-subheader'            - distinguished page header
		* 'mod-nav-link'                  - clear breakdown of nav links

		>>> more settings are described inside documentation page >>>
	-->
<body class="mod-bg-1 mod-nav-link ">
	<!-- DOC: script to save and load page settings -->
	<script>
		/**
		 *	This script should be placed right after the body tag for fast execution 
		 *	Note: the script is written in pure javascript and does not depend on thirdparty library
		 **/
		'use strict';

		var classHolder = document.getElementsByTagName("BODY")[0],
		/** 
		 * Load from localstorage
		 **/
		themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) : {}, themeURL = themeSettings.themeURL || '', themeOptions = themeSettings.themeOptions
				|| '';
		/** 
		 * Load theme options
		 **/
		if (themeSettings.themeOptions) {
			classHolder.className = themeSettings.themeOptions;
			console.log("%c✔ Theme settings loaded", "color: #148f32");
		} else {
			console.log("%c✔ Heads up! Theme settings is empty or does not exist, loading default settings...", "color: #ed1c24");
		}
		if (themeSettings.themeURL && !document.getElementById('mytheme')) {
			var cssfile = document.createElement('link');
			cssfile.id = 'mytheme';
			cssfile.rel = 'stylesheet';
			cssfile.href = themeURL;
			document.getElementsByTagName('head')[0].appendChild(cssfile);

		} else if (themeSettings.themeURL && document.getElementById('mytheme')) {
			document.getElementById('mytheme').href = themeSettings.themeURL;
		}
		/** 
		 * Save to localstorage 
		 **/
		var saveSettings = function() {
			themeSettings.themeOptions = String(classHolder.className).split(/[^\w-]+/).filter(function(item) {
				return /^(nav|header|footer|mod|display)-/i.test(item);
			}).join(' ');
			if (document.getElementById('mytheme')) {
				themeSettings.themeURL = document.getElementById('mytheme').getAttribute("href");
			}
			;
			localStorage.setItem('themeSettings', JSON.stringify(themeSettings));
		}
		/** 
		 * Reset settings
		 **/
		var resetSettings = function() {
			localStorage.setItem("themeSettings", "");
		}
	</script>
	<!-- BEGIN Page Wrapper -->
	<div class="page-wrapper">
		<div class="page-inner">
			<!-- BEGIN Left Aside -->
			<aside class="page-sidebar">
				<div class="page-logo">
					<a href="#"
						class="page-logo-link press-scale-down d-flex align-items-center position-relative"
						data-toggle="modal" data-target="#modal-shortcut"> <img
						th:src="@{/img/logo.png}" alt="SmartAdmin WebApp"
						aria-roledescription="logo"> <span
						class="page-logo-text mr-1">上海赫丰HR智慧系统</span> <span
						class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
						<i
						class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>
					</a>
				</div>
				<!-- BEGIN PRIMARY NAVIGATION -->
				<nav id="js-primary-nav" class="primary-nav" role="navigation">
					<div class="nav-filter">
						<div class="position-relative">
							<input type="text" id="nav_filter_input"
								placeholder="Filter menu" class="form-control" tabindex="0">
							<a href="#" onclick="return false;"
								class="btn-primary btn-search-close js-waves-off"
								data-action="toggle" data-class="list-filter-active"
								data-target=".page-sidebar"> <i class="fal fa-chevron-up"></i>
							</a>
						</div>
					</div>
					<div class="info-card" th:object="${user}">
						<img th:src="@{/img/demo/avatars/avatar-admin.png}"
							class="profile-image rounded-circle" alt="Dr. Codex Lantern">
						<div class="info-card-text">
							<a href="#" class="d-flex align-items-center text-white"> <span
								class="text-truncate text-truncate-sm d-inline-block" th:text="${user.userName}">
									</span>
							</a> <span class="d-inline-block text-truncate text-truncate-sm" th:text="${user.email}">
								</span>
						</div>
						<img th:src="@{/img/card-backgrounds/cover-2-lg.png}"
							class="cover" alt="cover"> <a href="#"
							onclick="return false;" class="pull-trigger-btn"
							data-action="toggle" data-class="list-filter-active"
							data-target=".page-sidebar" data-focus="nav_filter_input"> <i
							class="fal fa-angle-down"></i>
						</a>
					</div>
					<!-- 导航栏 -->
                        <ul id="js-nav-menu" class="nav-menu">
                            <li>
                                <a href="#" title="首页" data-filter-tags="application index">
                                    <i class="fal fa-chart-pie"></i>
                                    <span class="nav-link-text" data-i18n="nav.application_index">首页</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" title="公司设置" data-filter-tags="company settings">
                                    <i class="fal fa-edit"></i>
                                    <span class="nav-link-text" data-i18n="nav.company_settings">公司设置</span>
                                </a>
                                <ul>
                                    <li>
                                        <a href="settings_how_it_works.html" title="组织架构" data-filter-tags="company settings organization">
                                            <span class="nav-link-text" data-i18n="nav.company_settings_organization">组织架构</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="settings_layout_options.html" title="出勤规定" data-filter-tags="company settings attendance">
                                            <span class="nav-link-text" data-i18n="nav.company_settings_attendance">出勤规定</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="settings_theme_modes.html" title="社保公积金计算器规则" data-filter-tags="company settings socialFundRule">
                                            <span class="nav-link-text" data-i18n="nav.company_settings_socialFundRule">社保公积金计算器规则</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#" title="公司资料" data-filter-tags="companyInfo settings">
                                    <i class="fal fa-book"></i>
                                    <span class="nav-link-text" data-i18n="nav.companyInfo_settings">公司资料</span>
                                </a>
                                <ul>
                                    <li>
                                        <a href="settings_how_it_works.html" title="资料管理" data-filter-tags="companyInfo settings dataManager">
                                            <span class="nav-link-text" data-i18n="nav.companyInfo_settings_dataManager">资料管理</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="settings_layout_options.html" title="合约管理" data-filter-tags="companyInfo settings contractManage">
                                            <span class="nav-link-text" data-i18n="nav.contractManage_settings_attendance">合约管理</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="settings_theme_modes.html" title="办公用品" data-filter-tags="companyInfo settings officeSupply">
                                            <span class="nav-link-text" data-i18n="nav.companyInfo_settings_officeSupply">办公用品</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="settings_theme_modes.html" title="公司证件" data-filter-tags="companyInfo settings companyDocument">
                                            <span class="nav-link-text" data-i18n="nav.companyInfo_settings_companyDocument">公司证件</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#" title="公司管理" data-filter-tags="companyManage settings">
                                    <i class="fal fa-cube"></i>
                                    <span class="nav-link-text" data-i18n="nav.companyManage_settings">公司管理</span>
                                </a>
                                <ul>
                                    <li>
                                        <a href="settings_how_it_works.html" title="组织架构" data-filter-tags="companyManage settings organization">
                                            <span class="nav-link-text" data-i18n="nav.companyManage_settings_organization">组织架构</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="settings_layout_options.html" title="员工花名册" data-filter-tags="companyManage settings employeeRoster">
                                            <span class="nav-link-text" data-i18n="nav.companyManage_settings_employeeRoster">员工花名册</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#" title="员工考勤" data-filter-tags="employeeAttendance settings">
                                    <i class="fal fa-calendar-alt"></i>
                                    <span class="nav-link-text" data-i18n="nav.employeeAttendance_settings">员工考勤</span>
                                </a>
                                <ul>
                                    <li>
                                        <a href="settings_how_it_works.html" title="年假查阅" data-filter-tags="employeeAttendance settings winterVacation">
                                            <span class="nav-link-text" data-i18n="nav.employeeAttendance_settings_winterVacation">年假查阅</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="settings_layout_options.html" title="考勤查询" data-filter-tags="employeeAttendance settings attendanceQuery">
                                            <span class="nav-link-text" data-i18n="nav.employeeAttendance_settings_attendanceQuery">考勤查询</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="settings_layout_options.html" title="考勤导入" data-filter-tags="employeeAttendance settings attendanceImport">
                                            <span class="nav-link-text" data-i18n="nav.employeeAttendance_settings_attendanceImport">考勤导入</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="active open">
                                <a href="#" title="工资核算" data-filter-tags="wage settings">
                                    <i class="fal fa-sack-dollar"></i>
                                    <span class="nav-link-text" data-i18n="nav.wage_settings">工资核算</span>
                                </a>
                                <ul>
                                	<li>
                                        <a th:href="@{/wage/punishRecord}" title="处罚记录" data-filter-tags="wage settings punishRecord">
                                            <span class="nav-link-text" data-i18n="nav.wage_settings_punishRecord">处罚记录</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a th:href="@{/wage/performManage}" title="绩效管理" data-filter-tags="wage settings performManage">
                                            <span class="nav-link-text" data-i18n="nav.wage_settings_performManage">绩效管理</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a th:href="@{/wage/providerecord}" title="发放记录" data-filter-tags="wage settings providerecord">
                                            <span class="nav-link-text" data-i18n="nav.wage_settings_providerecord">发放记录</span>
                                        </a>
                                    </li>
                                    <li class="active">
                                        <a th:href="@{/wage/newwageaccount}" title="核算新工资" data-filter-tags="wage settings newWageAccount">
                                            <span class="nav-link-text" data-i18n="nav.wage_settings_newWageAccount">核算新工资</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#" title="系统设置" data-filter-tags="system settings">
                                    <i class="fal fa-cog"></i>
                                    <span class="nav-link-text" data-i18n="nav.system_settings">系统设置</span>
                                </a>
                                <ul>
                                    <li>
                                        <a th:href="@{/system/user}" title="用户管理" data-filter-tags="system settings user">
                                            <span class="nav-link-text" data-i18n="nav.system_settings_user">用户管理</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a th:href="@{/system/user}" title="用户组管理" data-filter-tags="system settings userGroup">
                                            <span class="nav-link-text" data-i18n="nav.system_settings_userGroup">用户组管理</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a th:href="@{/system/user}" title="用户权限分配" data-filter-tags="system settings userRightsAssign">
                                            <span class="nav-link-text" data-i18n="nav.system_settings_userRightsAssign">用户权限分配</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
					<div class="filter-message js-filter-message bg-success-600"></div>
				</nav>
				<!-- END PRIMARY NAVIGATION -->
				<!-- NAV FOOTER -->
				<div class="nav-footer shadow-top">
					<a href="#" onclick="return false;" data-action="toggle"
						data-class="nav-function-minify" class="hidden-md-down"> <i
						class="ni ni-chevron-right"></i> <i class="ni ni-chevron-right"></i>
					</a>
					<ul class="list-table m-auto nav-footer-buttons">
						<li><a href="javascript:void(0);" data-toggle="tooltip"
							data-placement="top" title="Chat logs"> <i
								class="fal fa-comments"></i>
						</a></li>
						<li><a href="javascript:void(0);" data-toggle="tooltip"
							data-placement="top" title="Support Chat"> <i
								class="fal fa-life-ring"></i>
						</a></li>
						<li><a href="javascript:void(0);" data-toggle="tooltip"
							data-placement="top" title="Make a call"> <i
								class="fal fa-phone"></i>
						</a></li>
					</ul>
				</div>
				<!-- END NAV FOOTER -->
			</aside>
			<!-- END Left Aside -->
			<div class="page-content-wrapper">
				<!-- BEGIN Page Header -->
				<header class="page-header" role="banner">
					<!-- we need this logo when user switches to nav-function-top -->
					<div class="page-logo">
						<a href="#"
							class="page-logo-link press-scale-down d-flex align-items-center position-relative"
							data-toggle="modal" data-target="#modal-shortcut"> <img
							th:src="@{/img/logo.png}" alt="SmartAdmin WebApp"
							aria-roledescription="logo"> <span
							class="page-logo-text mr-1">SmartAdmin WebApp</span> <span
							class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
							<i
							class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>
						</a>
					</div>
					<!-- DOC: nav menu layout change shortcut -->
					<div class="hidden-md-down dropdown-icon-menu position-relative">
						<a href="#" class="header-btn btn js-waves-off"
							data-action="toggle" data-class="nav-function-hidden"
							title="Hide Navigation"> <i class="ni ni-menu"></i>
						</a>
						<ul>
							<li><a href="#" class="btn js-waves-off"
								data-action="toggle" data-class="nav-function-minify"
								title="Minify Navigation"> <i class="ni ni-minify-nav"></i>
							</a></li>
							<li><a href="#" class="btn js-waves-off"
								data-action="toggle" data-class="nav-function-fixed"
								title="Lock Navigation"> <i class="ni ni-lock-nav"></i>
							</a></li>
						</ul>
					</div>
					<!-- DOC: mobile button appears during mobile width -->
					<div class="hidden-lg-up">
						<a href="#" class="header-btn btn press-scale-down"
							data-action="toggle" data-class="mobile-nav-on"> <i
							class="ni ni-menu"></i>
						</a>
					</div>
					<div class="search">
						<form class="app-forms hidden-xs-down" role="search"
							action="page_search.html" autocomplete="off">
							<input type="text" id="search-field"
								placeholder="Search for anything" class="form-control"
								tabindex="1"> <a href="#" onclick="return false;"
								class="btn-danger btn-search-close js-waves-off d-none"
								data-action="toggle" data-class="mobile-search-on"> <i
								class="fal fa-times"></i>
							</a>
						</form>
					</div>
					<div class="ml-auto d-flex">
						<!-- activate app search icon (mobile) -->
						<div class="hidden-sm-up">
							<a href="#" class="header-icon" data-action="toggle"
								data-class="mobile-search-on" data-focus="search-field"
								title="Search"> <i class="fal fa-search"></i>
							</a>
						</div>
						<!-- app settings -->
						<div class="hidden-md-down">
							<a href="#" class="header-icon" data-toggle="modal"
								data-target=".js-modal-settings"> <i class="fal fa-cog"></i>
							</a>
						</div>
						<!-- app shortcuts -->
						<div>
							<a href="#" class="header-icon" data-toggle="dropdown"
								title="My Apps"> <i class="fal fa-cube"></i>
							</a>
							<div class="dropdown-menu dropdown-menu-animated w-auto h-auto">
								<div
									class="dropdown-header bg-trans-gradient d-flex justify-content-center align-items-center rounded-top">
									<h4 class="m-0 text-center color-white">
										Quick Shortcut <small class="mb-0 opacity-80">User
											Applications & Addons</small>
									</h4>
								</div>
								<div class="custom-scroll h-100">
									<ul class="app-list">
										<li><a href="#" class="app-list-item hover-white"> <span
												class="icon-stack"> <i
													class="base-2 icon-stack-3x color-primary-600"></i> <i
													class="base-3 icon-stack-2x color-primary-700"></i> <i
													class="ni ni-settings icon-stack-1x text-white fs-lg"></i>
											</span> <span class="app-list-name"> Services </span>
										</a></li>
										<li><a href="#" class="app-list-item hover-white"> <span
												class="icon-stack"> <i
													class="base-2 icon-stack-3x color-primary-400"></i> <i
													class="base-10 text-white icon-stack-1x"></i> <i
													class="ni md-profile color-primary-800 icon-stack-2x"></i>
											</span> <span class="app-list-name"> Account </span>
										</a></li>
										<li><a href="#" class="app-list-item hover-white"> <span
												class="icon-stack"> <i
													class="base-9 icon-stack-3x color-success-400"></i> <i
													class="base-2 icon-stack-2x color-success-500"></i> <i
													class="ni ni-shield icon-stack-1x text-white"></i>
											</span> <span class="app-list-name"> Security </span>
										</a></li>
										<li><a href="#" class="app-list-item hover-white"> <span
												class="icon-stack"> <i
													class="base-18 icon-stack-3x color-info-700"></i> <span
													class="position-absolute pos-top pos-left pos-right color-white fs-md mt-2 fw-400">28</span>
											</span> <span class="app-list-name"> Calendar </span>
										</a></li>
										<li><a href="#" class="app-list-item hover-white"> <span
												class="icon-stack"> <i
													class="base-7 icon-stack-3x color-info-500"></i> <i
													class="base-7 icon-stack-2x color-info-700"></i> <i
													class="ni ni-graph icon-stack-1x text-white"></i>
											</span> <span class="app-list-name"> Stats </span>
										</a></li>
										<li><a href="#" class="app-list-item hover-white"> <span
												class="icon-stack"> <i
													class="base-4 icon-stack-3x color-danger-500"></i> <i
													class="base-4 icon-stack-1x color-danger-400"></i> <i
													class="ni ni-envelope icon-stack-1x text-white"></i>
											</span> <span class="app-list-name"> Messages </span>
										</a></li>
										<li><a href="#" class="app-list-item hover-white"> <span
												class="icon-stack"> <i
													class="base-4 icon-stack-3x color-fusion-400"></i> <i
													class="base-5 icon-stack-2x color-fusion-200"></i> <i
													class="base-5 icon-stack-1x color-fusion-100"></i> <i
													class="fal fa-keyboard icon-stack-1x color-info-50"></i>
											</span> <span class="app-list-name"> Notes </span>
										</a></li>
										<li><a href="#" class="app-list-item hover-white"> <span
												class="icon-stack"> <i
													class="base-16 icon-stack-3x color-fusion-500"></i> <i
													class="base-10 icon-stack-1x color-primary-50 opacity-30"></i>
													<i
													class="base-10 icon-stack-1x fs-xl color-primary-50 opacity-20"></i>
													<i
													class="fal fa-dot-circle icon-stack-1x text-white opacity-85"></i>
											</span> <span class="app-list-name"> Photos </span>
										</a></li>
										<li><a href="#" class="app-list-item hover-white"> <span
												class="icon-stack"> <i
													class="base-19 icon-stack-3x color-primary-400"></i> <i
													class="base-7 icon-stack-2x color-primary-300"></i> <i
													class="base-7 icon-stack-1x fs-xxl color-primary-200"></i>
													<i class="base-7 icon-stack-1x color-primary-500"></i> <i
													class="fal fa-globe icon-stack-1x text-white opacity-85"></i>
											</span> <span class="app-list-name"> Maps </span>
										</a></li>
										<li><a href="#" class="app-list-item hover-white"> <span
												class="icon-stack"> <i
													class="base-5 icon-stack-3x color-success-700 opacity-80"></i>
													<i
													class="base-12 icon-stack-2x color-success-700 opacity-30"></i>
													<i class="fal fa-comment-alt icon-stack-1x text-white"></i>
											</span> <span class="app-list-name"> Chat </span>
										</a></li>
										<li><a href="#" class="app-list-item hover-white"> <span
												class="icon-stack"> <i
													class="base-5 icon-stack-3x color-warning-600"></i> <i
													class="base-7 icon-stack-2x color-warning-800 opacity-50"></i>
													<i class="fal fa-phone icon-stack-1x text-white"></i>
											</span> <span class="app-list-name"> Phone </span>
										</a></li>
										<li><a href="#" class="app-list-item hover-white"> <span
												class="icon-stack"> <i
													class="base-6 icon-stack-3x color-danger-600"></i> <i
													class="fal fa-chart-line icon-stack-1x text-white"></i>
											</span> <span class="app-list-name"> Projects </span>
										</a></li>
										<li class="w-100"><a href="#"
											class="btn btn-default mt-4 mb-2 pr-5 pl-5"> Add more
												apps </a></li>
									</ul>
								</div>
							</div>
						</div>
						<!-- app message -->
						<a href="#" class="header-icon" data-toggle="modal"
							data-target=".js-modal-messenger"> <i class="fal fa-globe"></i>
							<span class="badge badge-icon">!</span>
						</a>
						<!-- app notification -->
						<div>
							<a href="#" class="header-icon" data-toggle="dropdown"
								title="You got 11 notifications"> <i class="fal fa-bell"></i>
								<span class="badge badge-icon">11</span>
							</a>
							<div class="dropdown-menu dropdown-menu-animated dropdown-xl">
								<div
									class="dropdown-header bg-trans-gradient d-flex justify-content-center align-items-center rounded-top mb-2">
									<h4 class="m-0 text-center color-white">
										11 New <small class="mb-0 opacity-80">User
											Notifications</small>
									</h4>
								</div>
								<ul class="nav nav-tabs nav-tabs-clean" role="tablist">
									<li class="nav-item"><a
										class="nav-link px-4 fs-md js-waves-on fw-500"
										data-toggle="tab" href="#tab-messages"
										data-i18n="drpdwn.messages">Messages</a></li>
									<li class="nav-item"><a
										class="nav-link px-4 fs-md js-waves-on fw-500"
										data-toggle="tab" href="#tab-feeds" data-i18n="drpdwn.feeds">Feeds</a>
									</li>
									<li class="nav-item"><a
										class="nav-link px-4 fs-md js-waves-on fw-500"
										data-toggle="tab" href="#tab-events" data-i18n="drpdwn.events">Events</a>
									</li>
								</ul>
								<div class="tab-content tab-notification">
									<div class="tab-pane active p-3 text-center">
										<h5 class="mt-4 pt-4 fw-500">
											<span class="d-block fa-3x pb-4 text-muted"> <i
												class="ni ni-arrow-up text-gradient opacity-70"></i>
											</span> Select a tab above to activate <small
												class="mt-3 fs-b fw-400 text-muted"> This blank page
												message helps protect your privacy, or you can show the
												first message here automatically through <a href="#">settings
													page</a>
											</small>
										</h5>
									</div>
									<div class="tab-pane" id="tab-messages" role="tabpanel">
										<div class="custom-scroll h-100">
											<ul class="notification">
												<li class="unread"><a href="#"
													class="d-flex align-items-center"> <span
														class="status mr-2"> <span
															class="profile-image rounded-circle d-inline-block"
															style="background-image: url('img/demo/avatars/avatar-c.png')"></span>
													</span> <span class="d-flex flex-column flex-1 ml-1"> <span
															class="name">Melissa Ayre <span
																class="badge badge-primary fw-n position-absolute pos-top pos-right mt-1">INBOX</span></span>
															<span class="msg-a fs-sm">Re: New security codes</span> <span
															class="msg-b fs-xs">Hello again and thanks for
																being part...</span> <span class="fs-nano text-muted mt-1">56
																seconds ago</span>
													</span>
												</a></li>
												<li class="unread"><a href="#"
													class="d-flex align-items-center"> <span
														class="status mr-2"> <span
															class="profile-image rounded-circle d-inline-block"
															style="background-image: url('img/demo/avatars/avatar-a.png')"></span>
													</span> <span class="d-flex flex-column flex-1 ml-1"> <span
															class="name">Adison Lee</span> <span class="msg-a fs-sm">Msed
																quia non numquam eius</span> <span
															class="fs-nano text-muted mt-1">2 minutes ago</span>
													</span>
												</a></li>
												<li><a href="#" class="d-flex align-items-center">
														<span class="status status-success mr-2"> <span
															class="profile-image rounded-circle d-inline-block"
															style="background-image: url('img/demo/avatars/avatar-b.png')"></span>
													</span> <span class="d-flex flex-column flex-1 ml-1"> <span
															class="name">Oliver Kopyuv</span> <span
															class="msg-a fs-sm">Msed quia non numquam eius</span> <span
															class="fs-nano text-muted mt-1">3 days ago</span>
													</span>
												</a></li>
												<li><a href="#" class="d-flex align-items-center">
														<span class="status status-warning mr-2"> <span
															class="profile-image rounded-circle d-inline-block"
															style="background-image: url('img/demo/avatars/avatar-e.png')"></span>
													</span> <span class="d-flex flex-column flex-1 ml-1"> <span
															class="name">Dr. John Cook PhD</span> <span
															class="msg-a fs-sm">Msed quia non numquam eius</span> <span
															class="fs-nano text-muted mt-1">2 weeks ago</span>
													</span>
												</a></li>
												<li><a href="#" class="d-flex align-items-center">
														<span class="status status-success mr-2"> <!-- <img src="img/demo/avatars/avatar-m.png" data-src="img/demo/avatars/avatar-h.png" class="profile-image rounded-circle" alt="Sarah McBrook" /> -->
															<span class="profile-image rounded-circle d-inline-block"
															style="background-image: url('img/demo/avatars/avatar-h.png')"></span>
													</span> <span class="d-flex flex-column flex-1 ml-1"> <span
															class="name">Sarah McBrook</span> <span
															class="msg-a fs-sm">Msed quia non numquam eius</span> <span
															class="fs-nano text-muted mt-1">3 weeks ago</span>
													</span>
												</a></li>
												<li><a href="#" class="d-flex align-items-center">
														<span class="status status-success mr-2"> <span
															class="profile-image rounded-circle d-inline-block"
															style="background-image: url('img/demo/avatars/avatar-m.png')"></span>
													</span> <span class="d-flex flex-column flex-1 ml-1"> <span
															class="name">Anothony Bezyeth</span> <span
															class="msg-a fs-sm">Msed quia non numquam eius</span> <span
															class="fs-nano text-muted mt-1">one month ago</span>
													</span>
												</a></li>
												<li><a href="#" class="d-flex align-items-center">
														<span class="status status-danger mr-2"> <span
															class="profile-image rounded-circle d-inline-block"
															style="background-image: url('img/demo/avatars/avatar-j.png')"></span>
													</span> <span class="d-flex flex-column flex-1 ml-1"> <span
															class="name">Lisa Hatchensen</span> <span
															class="msg-a fs-sm">Msed quia non numquam eius</span> <span
															class="fs-nano text-muted mt-1">one year ago</span>
													</span>
												</a></li>
											</ul>
										</div>
									</div>
									<div class="tab-pane" id="tab-feeds" role="tabpanel">
										<div class="custom-scroll h-100">
											<ul class="notification">
												<li class="unread">
													<div class="d-flex align-items-center show-child-on-hover">
														<span class="d-flex flex-column flex-1"> <span
															class="name d-flex align-items-center">Administrator
																<span class="badge badge-success fw-n ml-1">UPDATE</span>
														</span> <span class="msg-a fs-sm"> System updated to
																version <strong>4.5.1</strong> <a
																href="docs_buildnotes.html">(patch notes)</a>
														</span> <span class="fs-nano text-muted mt-1">5 mins ago</span>
														</span>
														<div
															class="show-on-hover-parent position-absolute pos-right pos-bottom p-3">
															<a href="#" class="text-muted" title="delete"><i
																class="fal fa-trash-alt"></i></a>
														</div>
													</div>
												</li>
												<li>
													<div class="d-flex align-items-center show-child-on-hover">
														<div class="d-flex flex-column flex-1">
															<span class="name"> Adison Lee <span
																class="fw-300 d-inline">replied to your video <a
																	href="#" class="fw-400"> Cancer Drug</a>
															</span>
															</span> <span class="msg-a fs-sm mt-2">Bring to the table
																win-win survival strategies to ensure proactive
																domination. At the end of the day...</span> <span
																class="fs-nano text-muted mt-1">10 minutes ago</span>
														</div>
														<div
															class="show-on-hover-parent position-absolute pos-right pos-bottom p-3">
															<a href="#" class="text-muted" title="delete"><i
																class="fal fa-trash-alt"></i></a>
														</div>
													</div>
												</li>
												<li>
													<div class="d-flex align-items-center show-child-on-hover">
														<!--<img src="img/demo/avatars/avatar-m.png" data-src="img/demo/avatars/avatar-k.png" class="profile-image rounded-circle" alt="k" />-->
														<div class="d-flex flex-column flex-1">
															<span class="name"> Troy Norman'<span
																class="fw-300">s new connections</span>
															</span>
															<div class="fs-sm d-flex align-items-center mt-2">
																<span
																	class="profile-image-md mr-1 rounded-circle d-inline-block"
																	style="background-image: url('img/demo/avatars/avatar-a.png'); background-size: cover;"></span>
																<span
																	class="profile-image-md mr-1 rounded-circle d-inline-block"
																	style="background-image: url('img/demo/avatars/avatar-b.png'); background-size: cover;"></span>
																<span
																	class="profile-image-md mr-1 rounded-circle d-inline-block"
																	style="background-image: url('img/demo/avatars/avatar-c.png'); background-size: cover;"></span>
																<span
																	class="profile-image-md mr-1 rounded-circle d-inline-block"
																	style="background-image: url('img/demo/avatars/avatar-e.png'); background-size: cover;"></span>
																<div data-hasmore="+3"
																	class="rounded-circle profile-image-md mr-1">
																	<span
																		class="profile-image-md mr-1 rounded-circle d-inline-block"
																		style="background-image: url('img/demo/avatars/avatar-h.png'); background-size: cover;"></span>
																</div>
															</div>
															<span class="fs-nano text-muted mt-1">55 minutes
																ago</span>
														</div>
														<div
															class="show-on-hover-parent position-absolute pos-right pos-bottom p-3">
															<a href="#" class="text-muted" title="delete"><i
																class="fal fa-trash-alt"></i></a>
														</div>
													</div>
												</li>
												<li>
													<div class="d-flex align-items-center show-child-on-hover">
														<!--<img src="img/demo/avatars/avatar-m.png" data-src="img/demo/avatars/avatar-e.png" class="profile-image-sm rounded-circle align-self-start mt-1" alt="k" />-->
														<div class="d-flex flex-column flex-1">
															<span class="name">Dr John Cook <span
																class="fw-300">sent a <span class="text-danger">new
																		signal</span></span></span> <span class="msg-a fs-sm mt-2">Nanotechnology
																immersion along the information highway will close the
																loop on focusing solely on the bottom line.</span> <span
																class="fs-nano text-muted mt-1">10 minutes ago</span>
														</div>
														<div
															class="show-on-hover-parent position-absolute pos-right pos-bottom p-3">
															<a href="#" class="text-muted" title="delete"><i
																class="fal fa-trash-alt"></i></a>
														</div>
													</div>
												</li>
												<li>
													<div class="d-flex align-items-center show-child-on-hover">
														<div class="d-flex flex-column flex-1">
															<span class="name">Lab Images <span class="fw-300">were
																	updated!</span></span>
															<div class="fs-sm d-flex align-items-center mt-1">
																<a href="#" class="mr-1 mt-1" title="Cell A-0012"> <span
																	class="d-block img-share"
																	style="background-image: url('img/thumbs/pic-7.png'); background-size: cover;"></span>
																</a> <a href="#" class="mr-1 mt-1"
																	title="Patient A-473 saliva"> <span
																	class="d-block img-share"
																	style="background-image: url('img/thumbs/pic-8.png'); background-size: cover;"></span>
																</a> <a href="#" class="mr-1 mt-1"
																	title="Patient A-473 blood cells"> <span
																	class="d-block img-share"
																	style="background-image: url('img/thumbs/pic-11.png'); background-size: cover;"></span>
																</a> <a href="#" class="mr-1 mt-1"
																	title="Patient A-473 Membrane O.C"> <span
																	class="d-block img-share"
																	style="background-image: url('img/thumbs/pic-12.png'); background-size: cover;"></span>
																</a>
															</div>
															<span class="fs-nano text-muted mt-1">55 minutes
																ago</span>
														</div>
														<div
															class="show-on-hover-parent position-absolute pos-right pos-bottom p-3">
															<a href="#" class="text-muted" title="delete"><i
																class="fal fa-trash-alt"></i></a>
														</div>
													</div>
												</li>
												<li>
													<div class="d-flex align-items-center show-child-on-hover">
														<!--<img src="img/demo/avatars/avatar-m.png" data-src="img/demo/avatars/avatar-h.png" class="profile-image rounded-circle align-self-start mt-1" alt="k" />-->
														<div class="d-flex flex-column flex-1">
															<div class="name mb-2">
																Lisa Lamar<span class="fw-300"> updated project</span>
															</div>
															<div class="row fs-b fw-300">
																<div class="col text-left">Progress</div>
																<div class="col text-right fw-500">45%</div>
															</div>
															<div class="progress progress-sm d-flex mt-1">
																<span
																	class="progress-bar bg-primary-500 progress-bar-striped"
																	role="progressbar" style="width: 45%"
																	aria-valuenow="45" aria-valuemin="0"
																	aria-valuemax="100"></span>
															</div>
															<span class="fs-nano text-muted mt-1">2 hrs ago</span>
															<div
																class="show-on-hover-parent position-absolute pos-right pos-bottom p-3">
																<a href="#" class="text-muted" title="delete"><i
																	class="fal fa-trash-alt"></i></a>
															</div>
														</div>
													</div>
												</li>
											</ul>
										</div>
									</div>
									<div class="tab-pane" id="tab-events" role="tabpanel">
										<div class="d-flex flex-column h-100">
											<div class="h-auto">
												<table
													class="table table-bordered table-calendar m-0 w-100 h-100 border-0">
													<tr>
														<th colspan="7" class="pt-3 pb-2 pl-3 pr-3 text-center">
															<div class="js-get-date h5 mb-2">[your date here]</div>
														</th>
													</tr>
													<tr class="text-center">
														<th>Sun</th>
														<th>Mon</th>
														<th>Tue</th>
														<th>Wed</th>
														<th>Thu</th>
														<th>Fri</th>
														<th>Sat</th>
													</tr>
													<tr>
														<td class="text-muted bg-faded">30</td>
														<td>1</td>
														<td>2</td>
														<td>3</td>
														<td>4</td>
														<td>5</td>
														<td><i
															class="fal fa-birthday-cake mt-1 ml-1 position-absolute pos-left pos-top text-primary"></i>
															6</td>
													</tr>
													<tr>
														<td>7</td>
														<td>8</td>
														<td>9</td>
														<td class="bg-primary-300 pattern-0">10</td>
														<td>11</td>
														<td>12</td>
														<td>13</td>
													</tr>
													<tr>
														<td>14</td>
														<td>15</td>
														<td>16</td>
														<td>17</td>
														<td>18</td>
														<td>19</td>
														<td>20</td>
													</tr>
													<tr>
														<td>21</td>
														<td>22</td>
														<td>23</td>
														<td>24</td>
														<td>25</td>
														<td>26</td>
														<td>27</td>
													</tr>
													<tr>
														<td>28</td>
														<td>29</td>
														<td>30</td>
														<td>31</td>
														<td class="text-muted bg-faded">1</td>
														<td class="text-muted bg-faded">2</td>
														<td class="text-muted bg-faded">3</td>
													</tr>
												</table>
											</div>
											<div class="flex-1 custom-scroll">
												<div class="p-2">
													<div class="d-flex align-items-center text-left mb-3">
														<div
															class="width-5 fw-300 text-primary l-h-n mr-1 align-self-start fs-xxl">
															15</div>
														<div class="flex-1">
															<div class="d-flex flex-column">
																<span class="l-h-n fs-md fw-500 opacity-70">
																	October 2020 </span> <span
																	class="l-h-n fs-nano fw-400 text-secondary">
																	Friday </span>
															</div>
															<div class="mt-3">
																<p>
																	<strong>2:30PM</strong> - Doctor's appointment
																</p>
																<p>
																	<strong>3:30PM</strong> - Report overview
																</p>
																<p>
																	<strong>4:30PM</strong> - Meeting with Donnah V.
																</p>
																<p>
																	<strong>5:30PM</strong> - Late Lunch
																</p>
																<p>
																	<strong>6:30PM</strong> - Report Compression
																</p>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div
									class="py-2 px-3 bg-faded d-block rounded-bottom text-right border-faded border-bottom-0 border-right-0 border-left-0">
									<a href="#" class="fs-xs fw-500 ml-auto">view all
										notifications</a>
								</div>
							</div>
						</div>
						<!-- app user menu -->
						<div>
							<a href="#" data-toggle="dropdown"
								title="drlantern@gotbootstrap.com"
								class="header-icon d-flex align-items-center justify-content-center ml-2">
								<img th:src="@{/img/demo/avatars/avatar-admin.png}"
								class="profile-image rounded-circle" alt="Dr. Codex Lantern">
								<!-- you can also add username next to the avatar with the codes below:
									<span class="ml-1 mr-1 text-truncate text-truncate-header hidden-xs-down">Me</span>
									<i class="ni ni-chevron-down hidden-xs-down"></i> -->
							</a>
							<div class="dropdown-menu dropdown-menu-animated dropdown-lg">
								<div
									class="dropdown-header bg-trans-gradient d-flex flex-row py-4 rounded-top">
									<div
										class="d-flex flex-row align-items-center mt-1 mb-1 color-white">
										<span class="mr-2"> <img
											th:src="@{/img/demo/avatars/avatar-admin.png}"
											class="rounded-circle profile-image" alt="Dr. Codex Lantern">
										</span>
										<div class="info-card-text" th:object="${user}">
											<div class="fs-lg text-truncate text-truncate-lg" th:text="${user.userName}">
												</div>
											<span class="text-truncate text-truncate-md opacity-80" th:text="${user.email}"></span>
										</div>
									</div>
								</div>
								<div class="dropdown-divider m-0"></div>
								<a href="#" class="dropdown-item" data-action="app-reset"> <span
									data-i18n="drpdwn.reset_layout">Reset Layout</span>
								</a> <a href="#" class="dropdown-item" data-toggle="modal"
									data-target=".js-modal-settings"> <span
									data-i18n="drpdwn.settings">Settings</span>
								</a>
								<div class="dropdown-divider m-0"></div>
								<a href="#" class="dropdown-item" data-action="app-fullscreen">
									<span data-i18n="drpdwn.fullscreen">Fullscreen</span> <i
									class="float-right text-muted fw-n">F11</i>
								</a> <a href="#" class="dropdown-item" data-action="app-print">
									<span data-i18n="drpdwn.print">Print</span> <i
									class="float-right text-muted fw-n">Ctrl + P</i>
								</a>
								<div class="dropdown-multilevel dropdown-multilevel-left">
									<div class="dropdown-item">Language</div>
									<div class="dropdown-menu">
										<a href="#?lang=fr" class="dropdown-item" data-action="lang"
											data-lang="fr">Français</a> <a href="#?lang=en"
											class="dropdown-item active" data-action="lang"
											data-lang="en">English (US)</a> <a href="#?lang=es"
											class="dropdown-item" data-action="lang" data-lang="es">Español</a>
										<a href="#?lang=ru" class="dropdown-item" data-action="lang"
											data-lang="ru">Русский язык</a> <a href="#?lang=jp"
											class="dropdown-item" data-action="lang" data-lang="jp">日本語</a>
										<a href="#?lang=ch" class="dropdown-item" data-action="lang"
											data-lang="ch">中文</a>
									</div>
								</div>
								<div class="dropdown-divider m-0"></div>
								<a class="dropdown-item fw-500 pt-3 pb-3" href="page_login.html">
									<span data-i18n="drpdwn.page-logout">Logout</span> <span
									class="float-right fw-n">&commat;codexlantern</span>
								</a>
							</div>
						</div>
					</div>
				</header>
				<!-- END Page Header -->
				<!-- BEGIN Page Content -->
				<!-- the #js-page-content id is needed for some plugins to initialize -->
				<main id="js-page-content" role="main" class="page-content">
				<ol class="breadcrumb page-breadcrumb">
					<li class="breadcrumb-item"><a href="javascript:void(0);">SmartAdmin</a></li>
					<li class="breadcrumb-item">工资核算</li>
					<li class="breadcrumb-item active">核算新工资</li>
					<li class="position-absolute pos-top pos-right d-none d-sm-block"><span
						class="js-get-date"></span></li>
				</ol>
				<div class="subheader">
					<h1 class="subheader-title">
						<i class='subheader-icon fal fa-window'></i> 核算新工资
					</h1>
				</div>
				<div class="row">
					<div class="col-xl-12">
						<!-- 核算新工资 -->
						<div id="panel-1" class="panel">
							<div class="panel-hdr">
								<h2>
									核算新工资 <span class="fw-300"></span>
								</h2>
								<div class="panel-toolbar">
									<button class="btn btn-panel" data-action="panel-collapse"
										data-toggle="tooltip" data-offset="0,10"
										data-original-title="Collapse"></button>
									<button class="btn btn-panel" data-action="panel-fullscreen"
										data-toggle="tooltip" data-offset="0,10"
										data-original-title="Fullscreen"></button>
									<button class="btn btn-panel" data-action="panel-close"
										data-toggle="tooltip" data-offset="0,10"
										data-original-title="Close"></button>
								</div>
							</div>
							<div class="panel-container show">
								<div class="panel-content">
									<div class="card m-auto border">
										<div class="card-body">
											<div class="form-group row">
												<label
													class="col-form-label col-sm-1 form-label text-lg-center">
													核算</label>
												<div class="col-sm-2">
													<div class="input-group">
														<input type="text" class="form-control" placeholder="选择年份"
															id="datepicker">
														<div class="input-group-append">
															<span class="input-group-text fs-xl"> <i
																class="fal fa-calendar-alt"></i>
															</span>
														</div>
													</div>
												</div>
												<div class="col-sm-1">
													<select class="form-control">
  														<option>1月</option>
  														<option>2月</option>
  														<option>3月</option>
  														<option>4月</option>
  														<option>5月</option>
  														<option>6月</option>
  														<option>7月</option>
  														<option>8月</option>
  														<option>9月</option>
  														<option>10月</option>
  														<option>11月</option>
  														<option>12月</option>
													</select>
												</div>
												<label
													class="col-form-label col-sm-1 form-label text-lg-left">
													工资</label>
											</div>
											
											<div id="smartwizard">
                                                <ul>
                                                    <li><a href="#step-1" class="nav-link">步骤一<br><small>设置员工基本薪酬<br>选择工资发放人员名单</small></a></li>
                                                    <li><a href="#step-2" class="nav-link">步骤二<br><small>导入当月考勤表<br>&nbsp;</small></a></li>
                                                    <li><a href="#step-3" class="nav-link">步骤三<br><small>导入当月绩效表<br>&nbsp;</small></a></li>
                                                    <li><a href="#step-4" class="nav-link">步骤四<br><small>其它增减<br>&nbsp;</small></a></li>
                                                	<li><a href="#step-5" class="nav-link">步骤五<br><small>生成个税<br>生成工资单</small></a></li>
                                                </ul>
                                                <div class="p-3">
                                                    <div id="step-1">
                                                    	<div class="row mb-3">
                                                    		<div class="col-sm-12 offset-md-6 col-md-6 d-flex align-items-center justify-content-end">
                                                    			<div class="dt-buttons">
                                                    				<button class="btn buttons-selected btn-primary btn-sm mr-1 disabled" tabindex="0" aria-controls="dt-basic-example" type="button"><span><i class="fal fa-save mr-1"></i> 保存</span></button>
																	<!-- <button class="btn btn-success btn-sm mr-1" tabindex="0" aria-controls="dt-basic-example" type="button"><span><i class="fal fa-plus mr-1"></i> 添加</span></button> -->
                                                   				 </div>
                                                    		</div>
                                                    	</div>		
                                                       <table id="table-1">
                                                       </table>
                                                    </div>
                                                    <div id="step-2">
                                                    	<div class="row mb-3">
                                                    		<div class="col-sm-12 offset-md-6 col-md-6 d-flex align-items-center justify-content-end">
                                                    			<div class="dt-buttons">
                                                    				<button class="btn buttons-selected btn-primary btn-sm mr-1 disabled" tabindex="0" aria-controls="dt-basic-example" type="button"><span><i class="fal fa-save mr-1"></i> 保存</span></button>
																	<!-- <button class="btn btn-success btn-sm mr-1" tabindex="0" aria-controls="dt-basic-example" type="button"><span><i class="fal fa-plus mr-1"></i> 添加</span></button> -->
                                                   				 </div>
                                                    		</div>
                                                    	</div>
                                                       <table id="table-2">
                                                       </table>
                                                    </div>
                                                    <div id="step-3">
                                                    	<div class="row mb-3">
                                                    		<div class="col-sm-12 offset-md-6 col-md-6 d-flex align-items-center justify-content-end">
                                                    			<div class="dt-buttons">
                                                    				<button class="btn buttons-selected btn-primary btn-sm mr-1 disabled" tabindex="0" aria-controls="dt-basic-example" type="button"><span><i class="fal fa-save mr-1"></i> 保存</span></button>
																	<!-- <button class="btn btn-success btn-sm mr-1" tabindex="0" aria-controls="dt-basic-example" type="button"><span><i class="fal fa-plus mr-1"></i> 添加</span></button> -->
                                                   				 </div>
                                                    		</div>
                                                    	</div>
                                                       <table id="table-3">
                                                       </table>
                                                    </div>
                                                    <div id="step-4">
                                                    	<div class="row mb-3">
                                                    		<div class="col-sm-12 offset-md-6 col-md-6 d-flex align-items-center justify-content-end">
                                                    			<div class="dt-buttons">
                                                    				<button class="btn buttons-selected btn-primary btn-sm mr-1 disabled" tabindex="0" aria-controls="dt-basic-example" type="button"><span><i class="fal fa-save mr-1"></i> 保存</span></button>
																	<!-- <button class="btn btn-success btn-sm mr-1" tabindex="0" aria-controls="dt-basic-example" type="button"><span><i class="fal fa-plus mr-1"></i> 添加</span></button> -->
                                                   				 </div>
                                                    		</div>
                                                    	</div>
                                                       <table id="table-4">
                                                       </table>
                                                    </div>
                                                    <div id="step-5">
	                                                   	<div class="row mb-3">
	                                                   		<div class="col-sm-12 offset-md-6 col-md-6 d-flex align-items-center justify-content-end">
	                                                   			<div class="dt-buttons">
	                                                   				<button class="btn buttons-selected btn-primary btn-sm mr-1 disabled" tabindex="0" aria-controls="dt-basic-example" type="button"><span><i class="fal fa-save mr-1"></i> 保存</span></button>
	                                                   				<button class="btn btn-success btn-sm mr-1" tabindex="0" aria-controls="dt-basic-example" type="button" onclick="exportData()"><span><i class="fal fa-file-export mr-1"></i> 导出</span></button>
	                                                   			</div>
	                                                   		</div>
	                                                   	</div>
	                                                    <table id="table-5">
	                                                    </table>
                                                    </div>
                                                </div>
                                            </div>
											
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				</main>
				<!-- this overlay is activated only when mobile menu is triggered -->
				<div class="page-content-overlay" data-action="toggle"
					data-class="mobile-nav-on"></div>
				<!-- END Page Content -->
				<!-- BEGIN Page Footer -->
				<footer class="page-footer" role="contentinfo">
					<div class="d-flex align-items-center flex-1 text-muted">
						<span class="hidden-md-down fw-700">2020 © SmartAdmin
							by&nbsp;<a href='https://www.gotbootstrap.com'
							class='text-primary fw-500' title='gotbootstrap.com'
							target='_blank'>gotbootstrap.com</a>
						</span>
					</div>
					<div>
						<ul class="list-table m-0">
							<li><a href="intel_introduction.html"
								class="text-secondary fw-700">About</a></li>
							<li class="pl-3"><a href="info_app_licensing.html"
								class="text-secondary fw-700">License</a></li>
							<li class="pl-3"><a href="info_app_docs.html"
								class="text-secondary fw-700">Documentation</a></li>
							<li class="pl-3 fs-xl"><a
								href="https://wrapbootstrap.com/user/MyOrange"
								class="text-secondary" target="_blank"><i
									class="fal fa-question-circle" aria-hidden="true"></i></a></li>
						</ul>
					</div>
				</footer>
				<!-- END Page Footer -->
				<!-- BEGIN Shortcuts -->
				<div class="modal fade modal-backdrop-transparent"
					id="modal-shortcut" tabindex="-1" role="dialog"
					aria-labelledby="modal-shortcut" aria-hidden="true">
					<div class="modal-dialog modal-dialog-top modal-transparent"
						role="document">
						<div class="modal-content">
							<div class="modal-body">
								<ul class="app-list w-auto h-auto p-0 text-left">
									<li><a href="intel_introduction.html"
										class="app-list-item text-white border-0 m-0">
											<div class="icon-stack">
												<i
													class="base base-7 icon-stack-3x opacity-100 color-primary-500 "></i>
												<i
													class="base base-7 icon-stack-2x opacity-100 color-primary-300 "></i>
												<i class="fal fa-home icon-stack-1x opacity-100 color-white"></i>
											</div> <span class="app-list-name"> Home </span>
									</a></li>
									<li><a href="page_inbox_general.html"
										class="app-list-item text-white border-0 m-0">
											<div class="icon-stack">
												<i
													class="base base-7 icon-stack-3x opacity-100 color-success-500 "></i>
												<i
													class="base base-7 icon-stack-2x opacity-100 color-success-300 "></i>
												<i class="ni ni-envelope icon-stack-1x text-white"></i>
											</div> <span class="app-list-name"> Inbox </span>
									</a></li>
									<li><a href="intel_introduction.html"
										class="app-list-item text-white border-0 m-0">
											<div class="icon-stack">
												<i
													class="base base-7 icon-stack-2x opacity-100 color-primary-300 "></i>
												<i class="fal fa-plus icon-stack-1x opacity-100 color-white"></i>
											</div> <span class="app-list-name"> Add More </span>
									</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!-- END Shortcuts -->
				<!-- BEGIN Color profile -->
				<!-- this area is hidden and will not be seen on screens or screen readers -->
				<!-- we use this only for CSS color refernce for JS stuff -->
				<p id="js-color-profile" class="d-none">
					<span class="color-primary-50"></span> <span
						class="color-primary-100"></span> <span class="color-primary-200"></span>
					<span class="color-primary-300"></span> <span
						class="color-primary-400"></span> <span class="color-primary-500"></span>
					<span class="color-primary-600"></span> <span
						class="color-primary-700"></span> <span class="color-primary-800"></span>
					<span class="color-primary-900"></span> <span class="color-info-50"></span>
					<span class="color-info-100"></span> <span class="color-info-200"></span>
					<span class="color-info-300"></span> <span class="color-info-400"></span>
					<span class="color-info-500"></span> <span class="color-info-600"></span>
					<span class="color-info-700"></span> <span class="color-info-800"></span>
					<span class="color-info-900"></span> <span class="color-danger-50"></span>
					<span class="color-danger-100"></span> <span
						class="color-danger-200"></span> <span class="color-danger-300"></span>
					<span class="color-danger-400"></span> <span
						class="color-danger-500"></span> <span class="color-danger-600"></span>
					<span class="color-danger-700"></span> <span
						class="color-danger-800"></span> <span class="color-danger-900"></span>
					<span class="color-warning-50"></span> <span
						class="color-warning-100"></span> <span class="color-warning-200"></span>
					<span class="color-warning-300"></span> <span
						class="color-warning-400"></span> <span class="color-warning-500"></span>
					<span class="color-warning-600"></span> <span
						class="color-warning-700"></span> <span class="color-warning-800"></span>
					<span class="color-warning-900"></span> <span
						class="color-success-50"></span> <span class="color-success-100"></span>
					<span class="color-success-200"></span> <span
						class="color-success-300"></span> <span class="color-success-400"></span>
					<span class="color-success-500"></span> <span
						class="color-success-600"></span> <span class="color-success-700"></span>
					<span class="color-success-800"></span> <span
						class="color-success-900"></span> <span class="color-fusion-50"></span>
					<span class="color-fusion-100"></span> <span
						class="color-fusion-200"></span> <span class="color-fusion-300"></span>
					<span class="color-fusion-400"></span> <span
						class="color-fusion-500"></span> <span class="color-fusion-600"></span>
					<span class="color-fusion-700"></span> <span
						class="color-fusion-800"></span> <span class="color-fusion-900"></span>
				</p>
				<!-- END Color profile -->
			</div>
		</div>
	</div>
	<!-- END Page Wrapper -->
	<!-- BEGIN Quick Menu -->
	<!-- to add more items, please make sure to change the variable '$menu-items: number;' in your _page-components-shortcut.scss -->
	<nav class="shortcut-menu d-none d-sm-block">
		<input type="checkbox" class="menu-open" name="menu-open"
			id="menu_open" /> <label for="menu_open" class="menu-open-button ">
			<span class="app-shortcut-icon d-block"></span>
		</label> <a href="#" class="menu-item btn" data-toggle="tooltip"
			data-placement="left" title="Scroll Top"> <i
			class="fal fa-arrow-up"></i>
		</a> <a href="page_login.html" class="menu-item btn" data-toggle="tooltip"
			data-placement="left" title="Logout"> <i class="fal fa-sign-out"></i>
		</a> <a href="#" class="menu-item btn" data-action="app-fullscreen"
			data-toggle="tooltip" data-placement="left" title="Full Screen">
			<i class="fal fa-expand"></i>
		</a> <a href="#" class="menu-item btn" data-action="app-print"
			data-toggle="tooltip" data-placement="left" title="Print page"> <i
			class="fal fa-print"></i>
		</a> <a href="#" class="menu-item btn" data-action="app-voice"
			data-toggle="tooltip" data-placement="left" title="Voice command">
			<i class="fal fa-microphone"></i>
		</a>
	</nav>
	<!-- END Quick Menu -->
	<!-- BEGIN Messenger -->
	<div class="modal fade js-modal-messenger modal-backdrop-transparent"
		tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-dialog-right">
			<div class="modal-content h-100">
				<div
					class="dropdown-header bg-trans-gradient d-flex align-items-center w-100">
					<div
						class="d-flex flex-row align-items-center mt-1 mb-1 color-white">
						<span class="mr-2"> <span
							class="rounded-circle profile-image d-block"
							style="background-image: url('img/demo/avatars/avatar-d.png'); background-size: cover;"></span>
						</span>
						<div class="info-card-text">
							<a href="javascript:void(0);"
								class="fs-lg text-truncate text-truncate-lg text-white"
								data-toggle="dropdown" aria-expanded="false"> Tracey Chang <i
								class="fal fa-angle-down d-inline-block ml-1 text-white fs-md"></i>
							</a>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">Send Email</a> <a
									class="dropdown-item" href="#">Create Appointment</a> <a
									class="dropdown-item" href="#">Block User</a>
							</div>
							<span class="text-truncate text-truncate-md opacity-80">IT
								Director</span>
						</div>
					</div>
					<button type="button"
						class="close text-white position-absolute pos-top pos-right p-2 m-1 mr-2"
						data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true"><i class="fal fa-times"></i></span>
					</button>
				</div>
				<div class="modal-body p-0 h-100 d-flex">
					<!-- BEGIN msgr-list -->
					<div
						class="msgr-list d-flex flex-column bg-faded border-faded border-top-0 border-right-0 border-bottom-0 position-absolute pos-top pos-bottom">
						<div>
							<div
								class="height-4 width-3 h3 m-0 d-flex justify-content-center flex-column color-primary-500 pl-3 mt-2">
								<i class="fal fa-search"></i>
							</div>
							<input type="text" class="form-control bg-white"
								id="msgr_listfilter_input" placeholder="Filter contacts"
								aria-label="FriendSearch" data-listfilter="#js-msgr-listfilter">
						</div>
						<div class="flex-1 h-100 custom-scroll">
							<div class="w-100">
								<ul id="js-msgr-listfilter" class="list-unstyled m-0">
									<li><a href="#"
										class="d-table w-100 px-2 py-2 text-dark hover-white"
										data-filter-tags="tracey chang online">
											<div
												class="d-table-cell align-middle status status-success status-sm ">
												<span class="profile-image-md rounded-circle d-block"
													style="background-image: url('img/demo/avatars/avatar-d.png'); background-size: cover;"></span>
											</div>
											<div class="d-table-cell w-100 align-middle pl-2 pr-2">
												<div class="text-truncate text-truncate-md">
													Tracey Chang <small
														class="d-block font-italic text-success fs-xs">
														Online </small>
												</div>
											</div>
									</a></li>
									<li><a href="#"
										class="d-table w-100 px-2 py-2 text-dark hover-white"
										data-filter-tags="oliver kopyuv online">
											<div
												class="d-table-cell align-middle status status-success status-sm ">
												<span class="profile-image-md rounded-circle d-block"
													style="background-image: url('img/demo/avatars/avatar-b.png'); background-size: cover;"></span>
											</div>
											<div class="d-table-cell w-100 align-middle pl-2 pr-2">
												<div class="text-truncate text-truncate-md">
													Oliver Kopyuv <small
														class="d-block font-italic text-success fs-xs">
														Online </small>
												</div>
											</div>
									</a></li>
									<li><a href="#"
										class="d-table w-100 px-2 py-2 text-dark hover-white"
										data-filter-tags="dr john cook phd away">
											<div
												class="d-table-cell align-middle status status-warning status-sm ">
												<span class="profile-image-md rounded-circle d-block"
													style="background-image: url('img/demo/avatars/avatar-e.png'); background-size: cover;"></span>
											</div>
											<div class="d-table-cell w-100 align-middle pl-2 pr-2">
												<div class="text-truncate text-truncate-md">
													Dr. John Cook PhD <small class="d-block font-italic fs-xs">
														Away </small>
												</div>
											</div>
									</a></li>
									<li><a href="#"
										class="d-table w-100 px-2 py-2 text-dark hover-white"
										data-filter-tags="ali amdaney online">
											<div
												class="d-table-cell align-middle status status-success status-sm ">
												<span class="profile-image-md rounded-circle d-block"
													style="background-image: url('img/demo/avatars/avatar-g.png'); background-size: cover;"></span>
											</div>
											<div class="d-table-cell w-100 align-middle pl-2 pr-2">
												<div class="text-truncate text-truncate-md">
													Ali Amdaney <small
														class="d-block font-italic fs-xs text-success">
														Online </small>
												</div>
											</div>
									</a></li>
									<li><a href="#"
										class="d-table w-100 px-2 py-2 text-dark hover-white"
										data-filter-tags="sarah mcbrook online">
											<div
												class="d-table-cell align-middle status status-success status-sm">
												<span class="profile-image-md rounded-circle d-block"
													style="background-image: url('img/demo/avatars/avatar-h.png'); background-size: cover;"></span>
											</div>
											<div class="d-table-cell w-100 align-middle pl-2 pr-2">
												<div class="text-truncate text-truncate-md">
													Sarah McBrook <small
														class="d-block font-italic fs-xs text-success">
														Online </small>
												</div>
											</div>
									</a></li>
									<li><a href="#"
										class="d-table w-100 px-2 py-2 text-dark hover-white"
										data-filter-tags="ali amdaney offline">
											<div class="d-table-cell align-middle status status-sm">
												<span class="profile-image-md rounded-circle d-block"
													style="background-image: url('img/demo/avatars/avatar-a.png'); background-size: cover;"></span>
											</div>
											<div class="d-table-cell w-100 align-middle pl-2 pr-2">
												<div class="text-truncate text-truncate-md">
													oliver.kopyuv@gotbootstrap.com <small
														class="d-block font-italic fs-xs"> Offline </small>
												</div>
											</div>
									</a></li>
									<li><a href="#"
										class="d-table w-100 px-2 py-2 text-dark hover-white"
										data-filter-tags="ali amdaney busy">
											<div
												class="d-table-cell align-middle status status-danger status-sm">
												<span class="profile-image-md rounded-circle d-block"
													style="background-image: url('img/demo/avatars/avatar-j.png'); background-size: cover;"></span>
											</div>
											<div class="d-table-cell w-100 align-middle pl-2 pr-2">
												<div class="text-truncate text-truncate-md">
													oliver.kopyuv@gotbootstrap.com <small
														class="d-block font-italic fs-xs text-danger">
														Busy </small>
												</div>
											</div>
									</a></li>
									<li><a href="#"
										class="d-table w-100 px-2 py-2 text-dark hover-white"
										data-filter-tags="ali amdaney offline">
											<div class="d-table-cell align-middle status status-sm">
												<span class="profile-image-md rounded-circle d-block"
													style="background-image: url('img/demo/avatars/avatar-c.png'); background-size: cover;"></span>
											</div>
											<div class="d-table-cell w-100 align-middle pl-2 pr-2">
												<div class="text-truncate text-truncate-md">
													oliver.kopyuv@gotbootstrap.com <small
														class="d-block font-italic fs-xs"> Offline </small>
												</div>
											</div>
									</a></li>
									<li><a href="#"
										class="d-table w-100 px-2 py-2 text-dark hover-white"
										data-filter-tags="ali amdaney inactive">
											<div class="d-table-cell align-middle">
												<span class="profile-image-md rounded-circle d-block"
													style="background-image: url('img/demo/avatars/avatar-m.png'); background-size: cover;"></span>
											</div>
											<div class="d-table-cell w-100 align-middle pl-2 pr-2">
												<div class="text-truncate text-truncate-md">
													+714651347790 <small
														class="d-block font-italic fs-xs opacity-50">
														Missed Call </small>
												</div>
											</div>
									</a></li>
								</ul>
								<div class="filter-message js-filter-message"></div>
							</div>
						</div>
						<div>
							<a class="fs-xl d-flex align-items-center p-3"> <i
								class="fal fa-cogs"></i>
							</a>
						</div>
					</div>
					<!-- END msgr-list -->
					<!-- BEGIN msgr -->
					<div class="msgr d-flex h-100 flex-column bg-white">
						<!-- BEGIN custom-scroll -->
						<div class="custom-scroll flex-1 h-100">
							<div id="chat_container" class="w-100 p-4">
								<!-- start .chat-segment -->
								<div class="chat-segment">
									<div class="time-stamp text-center mb-2 fw-400">Jun 19</div>
								</div>
								<!--  end .chat-segment -->
								<!-- start .chat-segment -->
								<div class="chat-segment chat-segment-sent">
									<div class="chat-message">
										<p>Hey Tracey, did you get my files?</p>
									</div>
									<div class="text-right fw-300 text-muted mt-1 fs-xs">
										3:00 pm</div>
								</div>
								<!--  end .chat-segment -->
								<!-- start .chat-segment -->
								<div class="chat-segment chat-segment-get">
									<div class="chat-message">
										<p>Hi</p>
										<p>Sorry going through a busy time in office. Yes I
											analyzed the solution.</p>
										<p>It will require some resource, which I could not
											manage.</p>
									</div>
									<div class="fw-300 text-muted mt-1 fs-xs">3:24 pm</div>
								</div>
								<!--  end .chat-segment -->
								<!-- start .chat-segment -->
								<div class="chat-segment chat-segment-sent chat-start">
									<div class="chat-message">
										<p>Okay</p>
									</div>
								</div>
								<!--  end .chat-segment -->
								<!-- start .chat-segment -->
								<div class="chat-segment chat-segment-sent chat-end">
									<div class="chat-message">
										<p>Sending you some dough today, you can allocate the
											resources to this project.</p>
									</div>
									<div class="text-right fw-300 text-muted mt-1 fs-xs">
										3:26 pm</div>
								</div>
								<!--  end .chat-segment -->
								<!-- start .chat-segment -->
								<div class="chat-segment chat-segment-get chat-start">
									<div class="chat-message">
										<p>Perfect. Thanks a lot!</p>
									</div>
								</div>
								<!--  end .chat-segment -->
								<!-- start .chat-segment -->
								<div class="chat-segment chat-segment-get">
									<div class="chat-message">
										<p>I will have them ready by tonight.</p>
									</div>
								</div>
								<!--  end .chat-segment -->
								<!-- start .chat-segment -->
								<div class="chat-segment chat-segment-get chat-end">
									<div class="chat-message">
										<p>Cheers</p>
									</div>
								</div>
								<!--  end .chat-segment -->
								<!-- start .chat-segment for timestamp -->
								<div class="chat-segment">
									<div class="time-stamp text-center mb-2 fw-400">Jun 20</div>
								</div>
								<!--  end .chat-segment for timestamp -->
							</div>
						</div>
						<!-- END custom-scroll  -->
						<!-- BEGIN msgr__chatinput -->
						<div class="d-flex flex-column">
							<div
								class="border-faded border-right-0 border-bottom-0 border-left-0 flex-1 mr-3 ml-3 position-relative shadow-top">
								<div class="pt-3 pb-1 pr-0 pl-0 rounded-0" tabindex="-1">
									<div id="msgr_input" contenteditable="true"
										data-placeholder="Type your message here..."
										class="height-10 form-content-editable"></div>
								</div>
							</div>
							<div
								class="height-8 px-3 d-flex flex-row align-items-center flex-wrap flex-shrink-0">
								<a href="javascript:void(0);"
									class="btn btn-icon fs-xl width-1 mr-1" data-toggle="tooltip"
									data-original-title="More options" data-placement="top"> <i
									class="fal fa-ellipsis-v-alt color-fusion-300"></i>
								</a> <a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1"
									data-toggle="tooltip" data-original-title="Attach files"
									data-placement="top"> <i
									class="fal fa-paperclip color-fusion-300"></i>
								</a> <a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1"
									data-toggle="tooltip" data-original-title="Insert photo"
									data-placement="top"> <i
									class="fal fa-camera color-fusion-300"></i>
								</a>
								<div class="ml-auto">
									<a href="javascript:void(0);" class="btn btn-info">Send</a>
								</div>
							</div>
						</div>
						<!-- END msgr__chatinput -->
					</div>
					<!-- END msgr -->
				</div>
			</div>
		</div>
	</div>
	<!-- END Messenger -->
	<!-- BEGIN Page Settings -->
	<div class="modal fade js-modal-settings modal-backdrop-transparent"
		tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-dialog-right modal-md">
			<div class="modal-content">
				<div
					class="dropdown-header bg-trans-gradient d-flex justify-content-center align-items-center w-100">
					<h4 class="m-0 text-center color-white">
						Layout Settings <small class="mb-0 opacity-80">User
							Interface Settings</small>
					</h4>
					<button type="button"
						class="close text-white position-absolute pos-top pos-right p-2 m-1 mr-2"
						data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true"><i class="fal fa-times"></i></span>
					</button>
				</div>
				<div class="modal-body p-0">
					<div class="settings-panel">
						<div class="mt-4 d-table w-100 px-5">
							<div class="d-table-cell align-middle">
								<h5 class="p-0">App Layout</h5>
							</div>
						</div>
						<div class="list" id="fh">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="header-function-fixed"></a> <span
								class="onoffswitch-title">Fixed Header</span> <span
								class="onoffswitch-title-desc">header is in a fixed at
								all times</span>
						</div>
						<div class="list" id="nff">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="nav-function-fixed"></a> <span
								class="onoffswitch-title">Fixed Navigation</span> <span
								class="onoffswitch-title-desc">left panel is fixed</span>
						</div>
						<div class="list" id="nfm">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="nav-function-minify"></a> <span
								class="onoffswitch-title">Minify Navigation</span> <span
								class="onoffswitch-title-desc">Skew nav to maximize space</span>
						</div>
						<div class="list" id="nfh">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="nav-function-hidden"></a> <span
								class="onoffswitch-title">Hide Navigation</span> <span
								class="onoffswitch-title-desc">roll mouse on edge to
								reveal</span>
						</div>
						<div class="list" id="nft">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="nav-function-top"></a> <span
								class="onoffswitch-title">Top Navigation</span> <span
								class="onoffswitch-title-desc">Relocate left pane to top</span>
						</div>
						<div class="list" id="fff">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="footer-function-fixed"></a> <span
								class="onoffswitch-title">Fixed Footer</span> <span
								class="onoffswitch-title-desc">page footer is fixed</span>
						</div>
						<div class="list" id="mmb">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-main-boxed"></a> <span
								class="onoffswitch-title">Boxed Layout</span> <span
								class="onoffswitch-title-desc">Encapsulates to a
								container</span>
						</div>
						<div class="expanded">
							<ul class="mb-3 mt-1">
								<li>
									<div class="bg-fusion-50" data-action="toggle"
										data-class="mod-bg-1"></div>
								</li>
								<li>
									<div class="bg-warning-200" data-action="toggle"
										data-class="mod-bg-2"></div>
								</li>
								<li>
									<div class="bg-primary-200" data-action="toggle"
										data-class="mod-bg-3"></div>
								</li>
								<li>
									<div class="bg-success-300" data-action="toggle"
										data-class="mod-bg-4"></div>
								</li>
								<li>
									<div class="bg-white border" data-action="toggle"
										data-class="mod-bg-none"></div>
								</li>
							</ul>
							<div class="list" id="mbgf">
								<a href="#" onclick="return false;" class="btn btn-switch"
									data-action="toggle" data-class="mod-fixed-bg"></a> <span
									class="onoffswitch-title">Fixed Background</span>
							</div>
						</div>
						<div class="mt-4 d-table w-100 px-5">
							<div class="d-table-cell align-middle">
								<h5 class="p-0">Mobile Menu</h5>
							</div>
						</div>
						<div class="list" id="nmp">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="nav-mobile-push"></a> <span
								class="onoffswitch-title">Push Content</span> <span
								class="onoffswitch-title-desc">Content pushed on menu
								reveal</span>
						</div>
						<div class="list" id="nmno">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="nav-mobile-no-overlay"></a> <span
								class="onoffswitch-title">No Overlay</span> <span
								class="onoffswitch-title-desc">Removes mesh on menu
								reveal</span>
						</div>
						<div class="list" id="sldo">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="nav-mobile-slide-out"></a> <span
								class="onoffswitch-title">Off-Canvas <sup>(beta)</sup></span> <span
								class="onoffswitch-title-desc">Content overlaps menu</span>
						</div>
						<div class="mt-4 d-table w-100 px-5">
							<div class="d-table-cell align-middle">
								<h5 class="p-0">Accessibility</h5>
							</div>
						</div>
						<div class="list" id="mbf">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-bigger-font"></a> <span
								class="onoffswitch-title">Bigger Content Font</span> <span
								class="onoffswitch-title-desc">content fonts are bigger
								for readability</span>
						</div>
						<div class="list" id="mhc">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-high-contrast"></a> <span
								class="onoffswitch-title">High Contrast Text (WCAG 2 AA)</span>
							<span class="onoffswitch-title-desc">4.5:1 text contrast
								ratio</span>
						</div>
						<div class="list" id="mcb">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-color-blind"></a> <span
								class="onoffswitch-title">Daltonism <sup>(beta)</sup>
							</span> <span class="onoffswitch-title-desc">color vision
								deficiency</span>
						</div>
						<div class="list" id="mpc">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-pace-custom"></a> <span
								class="onoffswitch-title">Preloader Inside</span> <span
								class="onoffswitch-title-desc">preloader will be inside
								content</span>
						</div>
						<div class="list" id="mpi">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-panel-icon"></a> <span
								class="onoffswitch-title">SmartPanel Icons (not Panels)</span> <span
								class="onoffswitch-title-desc">smartpanel buttons will
								appear as icons</span>
						</div>
						<div class="mt-4 d-table w-100 px-5">
							<div class="d-table-cell align-middle">
								<h5 class="p-0">Global Modifications</h5>
							</div>
						</div>
						<div class="list" id="mcbg">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-clean-page-bg"></a> <span
								class="onoffswitch-title">Clean Page Background</span> <span
								class="onoffswitch-title-desc">adds more whitespace</span>
						</div>
						<div class="list" id="mhni">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-hide-nav-icons"></a> <span
								class="onoffswitch-title">Hide Navigation Icons</span> <span
								class="onoffswitch-title-desc">invisible navigation icons</span>
						</div>
						<div class="list" id="dan">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-disable-animation"></a> <span
								class="onoffswitch-title">Disable CSS Animation</span> <span
								class="onoffswitch-title-desc">Disables CSS based
								animations</span>
						</div>
						<div class="list" id="mhic">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-hide-info-card"></a> <span
								class="onoffswitch-title">Hide Info Card</span> <span
								class="onoffswitch-title-desc">Hides info card from left
								panel</span>
						</div>
						<div class="list" id="mlph">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-lean-subheader"></a> <span
								class="onoffswitch-title">Lean Subheader</span> <span
								class="onoffswitch-title-desc">distinguished page header</span>
						</div>
						<div class="list" id="mnl">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-nav-link"></a> <span
								class="onoffswitch-title">Hierarchical Navigation</span> <span
								class="onoffswitch-title-desc">Clear breakdown of nav
								links</span>
						</div>
						<div class="list" id="mdn">
							<a href="#" onclick="return false;" class="btn btn-switch"
								data-action="toggle" data-class="mod-nav-dark"></a> <span
								class="onoffswitch-title">Dark Navigation</span> <span
								class="onoffswitch-title-desc">Navigation background is
								darkend</span>
						</div>
						<hr class="mb-0 mt-4">
						<div class="mt-4 d-table w-100 pl-5 pr-3">
							<div class="d-table-cell align-middle">
								<h5 class="p-0">Global Font Size</h5>
							</div>
						</div>
						<div class="list mt-1">
							<div class="btn-group btn-group-sm btn-group-toggle my-2"
								data-toggle="buttons">
								<label class="btn btn-default btn-sm" data-action="toggle-swap"
									data-class="root-text-sm" data-target="html"> <input
									type="radio" name="changeFrontSize"> SM
								</label> <label class="btn btn-default btn-sm" data-action="toggle-swap"
									data-class="root-text" data-target="html"> <input
									type="radio" name="changeFrontSize" checked=""> MD
								</label> <label class="btn btn-default btn-sm" data-action="toggle-swap"
									data-class="root-text-lg" data-target="html"> <input
									type="radio" name="changeFrontSize"> LG
								</label> <label class="btn btn-default btn-sm" data-action="toggle-swap"
									data-class="root-text-xl" data-target="html"> <input
									type="radio" name="changeFrontSize"> XL
								</label>
							</div>
							<span class="onoffswitch-title-desc d-block mb-0">Change <strong>root</strong>
								font size to effect rem values (resets on page refresh)
							</span>
						</div>
						<hr class="mb-0 mt-4">
						<div class="mt-4 d-table w-100 pl-5 pr-3">
							<div class="d-table-cell align-middle">
								<h5 class="p-0 pr-2 d-flex">
									Theme colors <a href="#" class="ml-auto fw-400 fs-xs"
										data-toggle="popover" data-trigger="focus"
										data-placement="top" title="" data-html="true"
										data-content="The settings below uses <code>localStorage</code> to load the external <strong>CSS</strong> file as an overlap to the base css. Due to network latency and <strong>CPU utilization</strong>, you may experience a brief flickering effect on page load which may show the intial applied theme for a split second. Setting the prefered style/theme in the header will prevent this from happening."
										data-original-title="<span class='text-primary'><i class='fal fa-exclamation-triangle mr-1'></i> Heads up!</span>"
										data-template="<div class=&quot;popover bg-white border-white&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-header bg-transparent&quot;></h3><div class=&quot;popover-body fs-xs&quot;></div></div>"><i
										class="fal fa-info-circle mr-1"></i> more info</a>
								</h5>
							</div>
						</div>
						<div class="expanded theme-colors pl-5 pr-3">
							<ul class="m-0">
								<li><a href="#" id="myapp-0" data-action="theme-update"
									data-themesave data-theme="" data-toggle="tooltip"
									data-placement="top" title="Wisteria (base css)"
									data-original-title="Wisteria (base css)"></a></li>
								<li><a href="#" id="myapp-1" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-1.css"
									data-toggle="tooltip" data-placement="top" title="Tapestry"
									data-original-title="Tapestry"></a></li>
								<li><a href="#" id="myapp-2" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-2.css"
									data-toggle="tooltip" data-placement="top" title="Atlantis"
									data-original-title="Atlantis"></a></li>
								<li><a href="#" id="myapp-3" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-3.css"
									data-toggle="tooltip" data-placement="top" title="Indigo"
									data-original-title="Indigo"></a></li>
								<li><a href="#" id="myapp-4" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-4.css"
									data-toggle="tooltip" data-placement="top" title="Dodger Blue"
									data-original-title="Dodger Blue"></a></li>
								<li><a href="#" id="myapp-5" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-5.css"
									data-toggle="tooltip" data-placement="top" title="Tradewind"
									data-original-title="Tradewind"></a></li>
								<li><a href="#" id="myapp-6" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-6.css"
									data-toggle="tooltip" data-placement="top" title="Cranberry"
									data-original-title="Cranberry"></a></li>
								<li><a href="#" id="myapp-7" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-7.css"
									data-toggle="tooltip" data-placement="top" title="Oslo Gray"
									data-original-title="Oslo Gray"></a></li>
								<li><a href="#" id="myapp-8" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-8.css"
									data-toggle="tooltip" data-placement="top"
									title="Chetwode Blue" data-original-title="Chetwode Blue"></a>
								</li>
								<li><a href="#" id="myapp-9" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-9.css"
									data-toggle="tooltip" data-placement="top" title="Apricot"
									data-original-title="Apricot"></a></li>
								<li><a href="#" id="myapp-10" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-10.css"
									data-toggle="tooltip" data-placement="top" title="Blue Smoke"
									data-original-title="Blue Smoke"></a></li>
								<li><a href="#" id="myapp-11" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-11.css"
									data-toggle="tooltip" data-placement="top" title="Green Smoke"
									data-original-title="Green Smoke"></a></li>
								<li><a href="#" id="myapp-12" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-12.css"
									data-toggle="tooltip" data-placement="top"
									title="Wild Blue Yonder" data-original-title="Wild Blue Yonder"></a>
								</li>
								<li><a href="#" id="myapp-13" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-13.css"
									data-toggle="tooltip" data-placement="top" title="Emerald"
									data-original-title="Emerald"></a></li>
								<li><a href="#" id="myapp-14" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-14.css"
									data-toggle="tooltip" data-placement="top" title="Supernova"
									data-original-title="Supernova"></a></li>
								<li><a href="#" id="myapp-15" data-action="theme-update"
									data-themesave data-theme="css/themes/cust-theme-15.css"
									data-toggle="tooltip" data-placement="top" title="Hoki"
									data-original-title="Hoki"></a></li>
							</ul>
						</div>
						<hr class="mb-0 mt-4">
						<div class="mt-4 d-table w-100 pl-5 pr-3">
							<div class="d-table-cell align-middle">
								<h5 class="p-0 pr-2 d-flex">
									Theme Modes (beta) <a href="#" class="ml-auto fw-400 fs-xs"
										data-toggle="popover" data-trigger="focus"
										data-placement="top" title="" data-html="true"
										data-content="This is a brand new technique we are introducing which uses CSS variables to infiltrate color options. While this has been working nicely on modern browsers without much issues, some users <strong>may still face issues on Internet Explorer </strong>. Until these issues are resolved or Internet Explorer improves, this feature will remain in Beta"
										data-original-title="<span class='text-primary'><i class='fal fa-question-circle mr-1'></i> Why beta?</span>"
										data-template="<div class=&quot;popover bg-white border-white&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-header bg-transparent&quot;></h3><div class=&quot;popover-body fs-xs&quot;></div></div>"><i
										class="fal fa-question-circle mr-1"></i> why beta?</a>
								</h5>
							</div>
						</div>
						<div class="pl-5 pr-3 py-3">
							<div class="ie-only alert alert-warning d-none">
								<h6>Internet Explorer Issue</h6>
								This particular component may not work as expected in Internet
								Explorer. Please use with caution.
							</div>
							<div class="row no-gutters">
								<div class="col-4 pr-2 text-center">
									<div id="skin-default" data-action="toggle-replace"
										data-replaceclass="mod-skin-light mod-skin-dark" data-class=""
										data-toggle="tooltip" data-placement="top" title=""
										class="d-flex bg-white border border-primary rounded overflow-hidden text-success js-waves-on"
										data-original-title="Default Mode" style="height: 80px">
										<div
											class="bg-primary-600 bg-primary-gradient px-2 pt-0 border-right border-primary"></div>
										<div class="d-flex flex-column flex-1">
											<div class="bg-white border-bottom border-primary py-1"></div>
											<div class="bg-faded flex-1 pt-3 pb-3 px-2">
												<div class="py-3"
													style="background: url('img/demo/s-1.png') top left no-repeat; background-size: 100%;"></div>
											</div>
										</div>
									</div>
									Default
								</div>
								<div class="col-4 px-1 text-center">
									<div id="skin-light" data-action="toggle-replace"
										data-replaceclass="mod-skin-dark" data-class="mod-skin-light"
										data-toggle="tooltip" data-placement="top" title=""
										class="d-flex bg-white border border-secondary rounded overflow-hidden text-success js-waves-on"
										data-original-title="Light Mode" style="height: 80px">
										<div class="bg-white px-2 pt-0 border-right border-"></div>
										<div class="d-flex flex-column flex-1">
											<div class="bg-white border-bottom border- py-1"></div>
											<div class="bg-white flex-1 pt-3 pb-3 px-2">
												<div class="py-3"
													style="background: url('img/demo/s-1.png') top left no-repeat; background-size: 100%;"></div>
											</div>
										</div>
									</div>
									Light
								</div>
								<div class="col-4 pl-2 text-center">
									<div id="skin-dark" data-action="toggle-replace"
										data-replaceclass="mod-skin-light" data-class="mod-skin-dark"
										data-toggle="tooltip" data-placement="top" title=""
										class="d-flex bg-white border border-dark rounded overflow-hidden text-success js-waves-on"
										data-original-title="Dark Mode" style="height: 80px">
										<div class="bg-fusion-500 px-2 pt-0 border-right"></div>
										<div class="d-flex flex-column flex-1">
											<div class="bg-fusion-600 border-bottom py-1"></div>
											<div class="bg-fusion-300 flex-1 pt-3 pb-3 px-2">
												<div class="py-3 opacity-30"
													style="background: url('img/demo/s-1.png') top left no-repeat; background-size: 100%;"></div>
											</div>
										</div>
									</div>
									Dark
								</div>
							</div>
						</div>
						<hr class="mb-0 mt-4">
						<div class="pl-5 pr-3 py-3 bg-faded">
							<div class="row no-gutters">
								<div class="col-6 pr-1">
									<a href="#" class="btn btn-outline-danger fw-500 btn-block"
										data-action="app-reset">Reset Settings</a>
								</div>
								<div class="col-6 pl-1">
									<a href="#" class="btn btn-danger fw-500 btn-block"
										data-action="factory-reset">Factory Reset</a>
								</div>
							</div>
						</div>
					</div>
					<span id="saving"></span>
				</div>
			</div>
		</div>
	</div>
	<!-- END Page Settings -->
	<!-- base vendor bundle: 
			 DOC: if you remove pace.js from core please note on Internet Explorer some CSS animations may execute before a page is fully loaded, resulting 'jump' animations 
						+ pace.js (recommended)
						+ jquery.js (core)
						+ jquery-ui-cust.js (core)
						+ popper.js (core)
						+ bootstrap.js (core)
						+ slimscroll.js (extension)
						+ app.navigation.js (core)
						+ ba-throttle-debounce.js (core)
						+ waves.js (extension)
						+ smartpanels.js (extension)
						+ src/../jquery-snippets.js (core) -->
	<th:block th:include="include :: footer" />
	<!-- <th:block th:include="include :: bootstrap3-js" /> -->
	<th:block th:include="include :: bootstrap-datepicker-js" />
	<th:block th:include="include :: smartwizard-js" />
	<th:block th:include="include :: bootstrap-table-js" />
	<!-- <th:block th:include="include :: bootstrap-table-editable-js" /> -->
	<th:block th:include="include :: jquery-webui-popover-js" />
	<script th:src="@{/js/common.js}"></script>
	<script>
		$(function(){
			$('[data-toggle="popover"]').popover();
			$('#popBtn').popover({
                trigger: 'click',
                placement: 'bottom', //top, bottom, left or right
                title: '<h1>bootStrap4学习之路</h1><p>漫漫长路，吾将上下求索之！</p>',
                html: true,
                content: ContentMethod(), 
            });
			$('[data-popover="webuipopover"]').webuiPopover({
				placement: 'bottom-right', //值: auto,top,right,bottom,left,top-right,top-left,bottom-right,bottom-left
				width: 'auto', //可以设置数字
				height: 'auto', //可以设置数字
				trigger: 'click', //值:click,hover
				style: '', //值:'',inverse
				delay: 300, //延迟时间, 悬浮属性才执行
				cache: true, //如果缓存设置为false,将重建
				multi: false, //在页面允许其他弹出层
				arrow: true, //是否显示箭头
				//title: $(this).attr("data-field"), //标题,如果标题设置为空字符串时,标题栏会自动隐藏
				//content: '<input type="text" value=123/>', //内容,内容可以是函数
				closeable: true, //显示关闭按钮
				padding: true, //内容填充
				type: 'html', //内容类型, 值:'html','iframe','async'
				url: '' //如果不是空的,插件将通过url加载内容
			});
			
			/* $("a[name='popConfirm']").click(function(){
				alert("yes");
			}) */
		})
		
		function popConfirm(obj){
			var datatable = $(obj).attr("data-table");
			var dataid = $(obj).attr("data-id");
			var datafield = $(obj).attr("data-field");
			var popInputVal = $('#'+(datafield+dataid)).val();
			if($.common.isNotEmpty(popInputVal)){
				//$('[data-popoverid='+(datafield+dataid)+']').webuiPopover('hide');
				$('[data-popoverid='+(datafield+dataid)+']').webuiPopover('destroy');
				console.log(datatable);
				console.log(datafield);
				console.log(popInputVal);
				$('#'+datatable).bootstrapTable('updateCell', {
			        index: parseInt(dataid)-1,
			        field: datafield,
			        value: popInputVal
			  	})
			  	$('[data-popover="webuipopover"]').webuiPopover({
					placement: 'bottom-right', //值: auto,top,right,bottom,left,top-right,top-left,bottom-right,bottom-left
					width: 'auto', //可以设置数字
					height: 'auto', //可以设置数字
					trigger: 'click', //值:click,hover
					style: '', //值:'',inverse
					delay: 300, //延迟时间, 悬浮属性才执行
					cache: true, //如果缓存设置为false,将重建
					multi: false, //在页面允许其他弹出层
					arrow: true, //是否显示箭头
					//title: $(this).attr("data-field"), //标题,如果标题设置为空字符串时,标题栏会自动隐藏
					//content: '<input type="text" value=123/>', //内容,内容可以是函数
					closeable: true, //显示关闭按钮
					padding: true, //内容填充
					type: 'html', //内容类型, 值:'html','iframe','async'
					url: '' //如果不是空的,插件将通过url加载内容
				});
			}
		}
		
		function editColumn(value,row,index,title,field){
			return '<a href="javascript:void(0)" data-title="'+title+'"  data-content="<div class=\'mb-2\'><div class=\'row\'><label class=\'col-form-label form-control-label col-sm-5 text-lg-center\'>'+title+'</label><input type=\'text\' id=\''+(field+row.id)+'\' class=\'form-control col-sm-7\' placeholder=\''+title+'\' value=\''+value+'\'></div></div><div class=\'d-flex\'><a href=\'javascript:void(0);\' class=\'btn btn-primary text-white ml-auto\' data-table=\'table-1\' data-id='+row.id+' data-field=\''+field+'\' onClick=\'popConfirm(this)\'>确认</a></div>" data-popover="webuipopover" data-popoverid="'+(field+row.id)+'" >'+value+'</a>';
		}
		
		var prefix = ctx + "wage/newwageaccount";
		var controls = {
			leftArrow : '<i class="fal fa-angle-left" style="font-size: 1.25rem"></i>',
			rightArrow : '<i class="fal fa-angle-right" style="font-size: 1.25rem"></i>'
		}
		
		$('#datepicker').datepicker({
			format : 'yyyy',//格式化
			language : 'zh-CN',
			startView: 2,
			minViewMode:2,
			maxViewMode: 2,
			orientation : "bottom left",
			templates : controls
		}).on('changeYear',function (ev) {
		    $(this).datepicker('hide');  
		    var date = ev.date;
		    var year = date.getFullYear();
		    
		});
		
		$('#datepicker').datepicker('setDate', new Date());

		
		  // Smart Wizard
        $('#smartwizard').smartWizard(
        {
            selected: 0, // 初始选择步骤，0=第一步
            keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
            autoAdjustHeight: false, // 自动调整内容高度
            cycleSteps: false, //允许循环步骤
            backButtonSupport: true, // 启用后退按钮
            useURLhash: false, // Enable selection of the step based on url hash
            showStepURLhash: false,
            justified:true,
            lang:
            { // Language variables
                next: '下一步',
                previous: '上一步'
            },
            toolbarSettings:
            {
                toolbarPosition: 'bottom', // none, top, bottom, both
                toolbarButtonPosition: 'right', // left, right
                showNextButton: true, // show/hide a Next button
                showPreviousButton: true, // show/hide a Previous button
                /*toolbarExtraButtons: [
		$('<button></button>').text('Finish')
					  .addClass('btn btn-info')
					  .on('click', function(){ 
					alert('Finsih button click');                            
					  }),
		$('<button></button>').text('Cancel')
					  .addClass('btn btn-danger')
					  .on('click', function(){ 
					alert('Cancel button click');                            
					  })
				  ]*/
            },
            anchorSettings:
            {
                anchorClickable: true, // Enable/Disable anchor navigation
                enableAllAnchors: false, // Activates all anchors clickable all times
                markDoneStep: true, // add done css
                enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
            },
            contentURL: null, // content url, Enables Ajax content loading. can set as data data-content-url on anchor
            contentCache: true, //ajax content
            disabledSteps: [], // Array Steps disabled
            errorSteps: [], // Highlight step with errors
            theme: 'arrows', //dots, default, circles
            transitionEffect: 'slide', // Effect on navigation, none/slide/fade
            transitionSpeed: '400'
        });
		  
        window.operateEvents = { //这段必须放在表格初始化之前。
    			'click .rowDel-1': function(e, value, row, index) {
    				var id = row.id; //拿到输入框值 传过去
    				$('#table-1').bootstrapTable('removeByUniqueId', id);
    			},
    			'click .rowDel-2': function(e, value, row, index) {
    				var id = row.id; //拿到输入框值 传过去
    				$('#table-2').bootstrapTable('removeByUniqueId', id);
    			},
    			'click .rowDel-3': function(e, value, row, index) {
    				var id = row.id; //拿到输入框值 传过去
    				$('#table-3').bootstrapTable('removeByUniqueId', id);
    			},
    			'click .rowDel-4': function(e, value, row, index) {
    				var id = row.id; //拿到输入框值 传过去
    				$('#table-4').bootstrapTable('removeByUniqueId', id);
    			},
    			'click .rowDel-5': function(e, value, row, index) {
    				var id = row.id; //拿到输入框值 传过去
    				$('#table-5').bootstrapTable('removeByUniqueId', id);
    			}
    		};
		  
        $("#table-1").bootstrapTable({
			//showColumns: true,
			url: ctx+'data/data1.json',
			uniqueId: "id",
			columns: [
				[{
					title: "序号",
					field: "id"
				}, {
					title: "工号",
					field: "jobNum",
					
				}, {
					title: "姓名",
					field: "name",
					
				}, {
					title: "部门",
					field: "departName",
				}, {
					title: "在职状态",
					field: "jobStatus",
					formatter:function(value,row,index){
						/* var data_content = '<div class=\'mb-2\'>'+
							'<div class=\'row\'>'+
								'<span>123</span>'+
								'<label>123</label>'+
								'<label class=\'col-form-label form-control-label col-sm-5 text-lg-center\'>在职状态</label>'+
								'<input type=\'text\' class=\'form-control col-sm-7\' placeholder=\'在职状态\'>'+
							'</div>'+
						'</div>'+
						'<div class=\'d-flex\'>'+
							'<a href=\'javascript:void(0);\' class=\'btn btn-primary text-white ml-auto\'>确认</a>'+
							'<a href=\'javascript:void(0);\' class=\'btn btn-default  ml-2 text-black\'>关闭</a>'+
						'</div>';
						console.log(data_content);
						return ['<a href="javascript:void(0)" data-toggle="popover" title="<h4 class=\'fw-500 width-sm\'><i class=\'fal fa-file-check mr-2\'></i>离职状态</h4>" data-content="<input type=\'text\' value=\'123456789\'>" data-html="true" data-placement="bottom" data-trigger ="click" data-index='+index+' data-table="table-1" data-field="jobStatus">'+value+'</a>'].join(''); */
					
						//return ['<button type="button" class="btn btn-outline-danger" data-toggle="popover" data-placement="top" title="<h4 class=\'fw-500 width-sm\'><i class=\'fal fa-file-check mr-2\'></i>File permissions</h4>" data-html="true" data-content="<div class=\'mb-2\'><div class=\'row\'><label class=\'col-form-label form-control-label col-sm-5 text-lg-center\'>在职状态</label><input type=\'text\' class=\'form-control col-sm-7\' placeholder=\'在职状态\'></div></div><div class=\'d-flex\'><a href=\'javascript:void(0);\' class=\'btn btn-primary text-white ml-auto\'>确认</a><a href=\'javascript:void(0);\' class=\'btn btn-default  ml-2 text-black\'>关闭</a></div>">Popover Forms</button>'].join('');
						
						return editColumn(value,row,index,"在职状态","jobStatus");
						//return ['<a href="javascript:void(0)" data-title="在职状态"  data-content="<div class=\'mb-2\'><div class=\'row\'><label class=\'col-form-label form-control-label col-sm-5 text-lg-center\'>在职状态</label><input type=\'text\' id=\'jobStatus'+row.id+'\' class=\'form-control col-sm-7\' placeholder=\'在职状态\' value=\''+value+'\'></div></div><div class=\'d-flex\'><a href=\'javascript:void(0);\' class=\'btn btn-primary text-white ml-auto\' data-table=\'table-1\' data-id='+row.id+' data-field=\'jobStatus\' onClick=\'popConfirm(this)\'>确认</a></div>" data-popover="webuipopover" data-popoverid="jobStatus'+row.id+'" >'+value+'</a>'].join('');
					}
				}, {
					title: "发放主体",
					field: "distriSubject",
					formatter:function(value,row,index){
						return editColumn(value,row,index,"发放主体","distriSubject");
					}
				}, {
					title: "税前收入",
					field: "preTaxIncome",
				}, {
					title: "基本工资",
					field: "basePay",
				}, {
					title: "入职时间",
					field: "entryTime",
				},{
					title: "离职时间",
					field: "leaveTime",
				},{
					title: "操作",
					events: operateEvents,
					formatter: operateFormatter1
				}]
			]
		});
        
        $("#table-2").bootstrapTable({
			//showColumns: true,
			url: ctx+'data/data2.json',
			uniqueId: "id",
			columns: [
				[{
					title: "序号",
					field: "id"
				}, {
					title: "工号",
					field: "jobNum",
					
				}, {
					title: "姓名",
					field: "name",
					
				}, {
					title: "部门",
					field: "departName",
				}, {
					title: "在职状态",
					field: "jobStatus",
				}, {
					title: "发放主体",
					field: "distriSubject",
				}, {
					title: "税前收入",
					field: "preTaxIncome",
				}, {
					title: "基本工资",
					field: "basePay",
				},  {
					title: "出勤天数",
					field: "ycqts",
					editable: {
						type: 'text',
						title: "出勤天数",
						validate: function(v) {
							if (!v) return '出勤天数不能为空';
					
						}
					}
				},  {
					title: "休息天数",
					field: "restDays",
					editable: {
						type: 'text',
						title: "休息天数",
						validate: function(v) {
							if (!v) return '休息天数不能为空';
					
						}
					}
				},  {
					title: "工作时长",
					field: "workHours",
					editable: {
						type: 'text',
						title: "工作时长",
						validate: function(v) {
							if (!v) return '工作时长不能为空';
					
						}
					}
				},  {
					title: "加班",
					field: "overTime",
					editable: {
						type: 'text',
						title: "加班",
						validate: function(v) {
							if (!v) return '加班不能为空';
					
						}
					}
				},  {
					title: "减除",
					field: "deductPay",
					editable: {
						type: 'text',
						title: "减除",
						validate: function(v) {
							if (!v) return '减除不能为空';
					
						}
					}
				},  {
					title: "应付工资",
					field: "wagePay",
				}, {
					title: "入职时间",
					field: "entryTime",
				},{
					title: "离职时间",
					field: "leaveTime",
				},{
					title: "操作",
					events: operateEvents,
					formatter: operateFormatter2
				}]
			]
		});
        
        $("#table-3").bootstrapTable({
			//showColumns: true,
			url: ctx+'data/data3.json',
			uniqueId: "id",
			columns: [
				[{
					title: "序号",
					field: "id"
				}, {
					title: "工号",
					field: "jobNum",
					
				}, {
					title: "姓名",
					field: "name",
					
				}, {
					title: "部门",
					field: "departName",
				}, {
					title: "在职状态",
					field: "jobStatus",
				}, {
					title: "发放主体",
					field: "distriSubject",
				}, {
					title: "税前收入",
					field: "preTaxIncome",
				}, {
					title: "基本工资",
					field: "basePay",
				},  {
					title: "出勤天数",
					field: "ycqts",
				},  {
					title: "休息天数",
					field: "restDays",
				},  {
					title: "工作时长",
					field: "workHours",
				},  {
					title: "加班",
					field: "overTime",
				}, {
					title: "减除",
					field: "deductPay",
				}, {
					title: "绩效",
					field: "performance",
					editable: {
						type: 'text',
						title: "绩效",
						validate: function(v) {
							if (!v) return '绩效不能为空';
					
						}
					}
				},{
					title: "应付工资",
					field: "wagePay",
				}, {
					title: "入职时间",
					field: "entryTime",
				},{
					title: "离职时间",
					field: "leaveTime",
				},{
					title: "操作",
					events: operateEvents,
					formatter: operateFormatter3
				}]
			]
		});
        
        $("#table-4").bootstrapTable({
			//showColumns: true,
			url: ctx+'data/data4.json',
			uniqueId: "id",
			columns: [
				[{
					title: "序号",
					field: "id"
				}, {
					title: "工号",
					field: "jobNum",
					
				}, {
					title: "姓名",
					field: "name",
					
				}, {
					title: "部门",
					field: "departName",
				}, {
					title: "在职状态",
					field: "jobStatus",
				}, {
					title: "发放主体",
					field: "distriSubject",
				}, {
					title: "税前收入",
					field: "preTaxIncome",
				}, {
					title: "基本工资",
					field: "basePay",
				},  {
					title: "出勤天数",
					field: "ycqts",
				},  {
					title: "休息天数",
					field: "restDays",
				},  {
					title: "工作时长",
					field: "workHours",
				},  {
					title: "加班",
					field: "overTime",
				}, {
					title: "减除",
					field: "deductPay",
				}, {
					title: "绩效",
					field: "performance",
				}, {
					title: "其它增减",
					field: "otherCrease",
					editable: {
						type: 'text',
						title: "其它增减",
						validate: function(v) {
							if (!v) return '其它增减不能为空';
					
						}
					}
				},{
					title: "实发工资",
					field: "wagePay",
				}, {
					title: "入职时间",
					field: "entryTime",
				},{
					title: "离职时间",
					field: "leaveTime",
				},{
					title: "操作",
					events: operateEvents,
					formatter: operateFormatter4
				}]
			]
		});
        
        $("#table-5").bootstrapTable({
			//showColumns: true,
			url: ctx+'data/data5.json',
			uniqueId: "id",
			columns: [
				[{
					title: "序号",
					field: "id"
				}, {
					title: "工号",
					field: "jobNum",
					
				}, {
					title: "姓名",
					field: "name",
					
				}, {
					title: "部门",
					field: "departName",
				}, {
					title: "在职状态",
					field: "jobStatus",
				}, {
					title: "发放主体",
					field: "distriSubject",
				}, {
					title: "税前收入",
					field: "preTaxIncome",
				}, {
					title: "基本工资",
					field: "basePay",
				},  {
					title: "出勤天数",
					field: "ycqts",
				},  {
					title: "休息天数",
					field: "restDays",
				},  {
					title: "工作时长",
					field: "workHours",
				},  {
					title: "加班",
					field: "overTime",
				}, {
					title: "减除",
					field: "deductPay",
				}, {
					title: "绩效",
					field: "performance",
				}, {
					title: "其它增减",
					field: "otherCrease",
				},{
					title: "实发工资",
					field: "wagePay",
					visible:false
				},  {
					title: "个人社保",
					field: "social",
				}, {
					title: "个人公积金",
					field: "paf",
				}, {
					title: "转账上限",
					field: "transferLimit",
				}, {
					title: "转账工资",
					field: "transferSalary",
					editable: {
						type: 'text',
						title: "转账工资",
						validate: function(v) {
							if (!v) return '转账工资不能为空';
					
						}
					}
				}, {
					title: "个税",
					field: "personalIncomeTax",
					editable: {
						type: 'text',
						title: "个税",
						validate: function(v) {
							if (!v) return '个税不能为空';
					
						}
					}
				}, {
					title: "不计税收入",
					field: "NonTaxIncome",
					editable: {
						type: 'text',
						title: "不计税收入",
						validate: function(v) {
							if (!v) return '不计税收入不能为空';
					
						}
					}
				},{
					title: "入职时间",
					field: "entryTime",
				},{
					title: "离职时间",
					field: "leaveTime",
				},{
					title: "操作",
					events: operateEvents,
					formatter: operateFormatter5
				}]
			]
		});
        
        function operateFormatter1(value, row, index) {
			return ['<button type="button" class="btn btn-danger" class="rowDel-1">删除</button>']
				.join('');
		};
		function operateFormatter2(value, row, index) {
			return ['<button type="button" class="btn btn-danger" class="rowDel-2">删除</button>']
				.join('');
		};
		function operateFormatter3(value, row, index) {
			return ['<button type="button" class="btn btn-danger" class="rowDel-3">删除</button>']
				.join('');
		};
		function operateFormatter4(value, row, index) {
			return ['<button type="button" class="btn btn-danger" class="rowDel-4">删除</button>']
				.join('');
		};
		function operateFormatter5(value, row, index) {
			return ['<button type="button" class="btn btn-danger" class="rowDel-5">删除</button>']
				.join('');
		};
		function ContentMethod(){
			console.log("yes");
			//return '<input type="text" value="123456">';
			return '<div class="mb-2"><div class="row"><label class="col-form-label form-control-label col-sm-5 text-lg-center">在职状态</label><input type="text" class="form-control col-sm-7" placeholder="在职状态" ></div></div><div class="d-flex"><a href="javascript:void(0);" class="btn btn-primary text-white ml-auto">确认</a><a href="javascript:void(0);" class="btn btn-default  ml-2 text-black">关闭</a></div>';
		}
		
		// 自定义按钮导出数据
	    function exportData(){
	        $('#table-5').tableExport({
	            type: 'excel',
	            escape: "false",
	            exportDataType: "all",
	            ignoreColumn: [23],//忽略某些列的索引
	            fileName: '工资核算',//下载文件名称
	            mso: {
					fileFormat: 'xlshtml',
					onMsoNumberFormat: doOnMsoNumberFormat,//格式化列
					pageFormat: 'a4',
					pageOrientation: 'portrait',
					rtl: false,
					styles: [],
					worksheetName: '工资核算',
					/* xslx: {
						formatId: {
							date: 14,
							numbers: 2
						}
					} */
				},
				/* onCellHtmlData: function(cell, row, col, data) { //处理导出内容,自定义某一行、某一列、某个单元格的内容
					return data;
				},  */
	        });
	    }
		
	  	//格式化
	    function doOnMsoNumberFormat(cell, row, col){
	        var result = "";  
	        if (row > 0 && col == 1){
	            result = "\\@";  
	        }
	        return result;  
	    }
	  
	 
		
	</script>
</body>
<!-- END Body -->
</html>
